كيفية استخدام جافا سكريبت عند النقر على علامة DIV لتبديل رؤية القسم الذي يحتوي على روابط قابلة للنقر؟

Question

مرحبًا، لدي قسم DIV يظهر عنوانه فقط في البداية.ما أود تحقيقه هو أنه عندما ينقر الزائر في أي مكان في المنطقة toggle_section ال toggle_stuff يقوم div بالتبديل بين المرئي والمخفي.

<div id="toggle_section" 
     onclick="javascript: new Effect.toggle('toggle_stuff', 'slide');">
    <div id="toggle_title">Some title</div>
    <div id="toggle_stuff">
        some content stuff
        <a href="/foo.php">Some link</a>
    </div>
</div>

ومع ذلك، فإن الطريقة التي تم إعدادها بها الآن، إذا كان لدي أي منها <a> الرابط داخل toggle_section, ، سيؤدي النقر فوق هذا الارتباط أيضًا إلى تنفيذ حدث onclick.

ثم سؤالي هو ما هي أفضل طريقة لضبط هذا النوع من السلوك؟

Answer 1

الحل الأكثر بساطة هو قم بإضافة معالج onclick إضافي إلى الرابط داخل DIV الخاص بك والذي يوقف نشر الحدث:

<div id="toggle_section" 
     onclick="javascript: new Effect.toggle('toggle_stuff', 'slide');">
    <div id="toggle_title">Some title</div>
    <div id="toggle_stuff">
        some content stuff
        <a href="/foo.php"
            onclick="Event.stop(event);"
        >Some link</a>
    </div>
</div>

يستخدم المثال أعلاه النموذج الأولي Event.stop() وظيفة من أجل تسهيل وقف انتشار الحدث عبر المتصفح.

كما يمكنك استخدام المضمنة onclick() المعالج، فإن معظم المتصفحات (إن لم يكن كلها) ستجتاز الحدث في مرحلة الفقاعات أولاً (وهو ما تريده).

دليل جيد لفهم الأسباب الفعلية وراء هذا السلوك والاختلافات بينهما التقاط الحدث و فقاعات الحدث يمكن العثور عليها في ممتازة وضع المراوغات.

Answer 2

في البرنامج النصي:

function overlayvis(blck) {
  el = document.getElementById(blck.id);
  el.style.visibility = (el.style.visibility == 'visible') ? 'hidden' : 'visible';
}

وصلة المنشط، تليها المحتوى (أي السبب الذي لا يمكن أن يكون آخر على الصفحة):

<div onclick='overlayvis(showhideme)">show/hide stuff</div>
<div id="showhideme">
  ... content to hide / unhide ...
</div>

وحصلت على هذا من مشروط نافذة جافا سكريبت المغلق تراكب - كان للبحث عن وكان مصدر ويسر للعثور عليه وكان هذا الموقع. :)

Answer 3

وبعد أن نشر سؤالي الأول أنا لا يمكن أن تنتظر في محاولة للتفكير في الامر مرة اخرى ويبدو أنني وجدت طريقة بسيطة للغاية لتحقيق ذلك.

ولقد نقل Effect.toggle onlick إلى وظيفة منفصلة مثل:

function someClick(event) {
    if (event.target.nodeName == 'A') {
        return;
    } else {
        new Effect.toggle('toggle_stuff', 'slide');
    }
}

وأعتقد أن هذا من شأنه أن تعمل فقط من أجل علامات A وليس أي شيء آخر غير قابلة للنقر على الرغم من.

Answer 4

لا أعرف حقًا ما إذا كان هذا سينجح، لكن حاول إعطاء عنصر الارتباط حجمًا أكبر z-index قيمة من toggle_section div.

شيء مثل :

#toggle_section a { z-index: 10; }

Answer 5

وإضافة معالج عند النقر على وقف انتشار الحدث.

ومع استخدام مسج: عند _ النقر = "event.stopPropagation ()"

ومع استخدام النموذج: عند _ النقر = "Event.stop (الحدث)"