منع جافا سكريبت عند _ النقر على عنصر تابع

StackOverflow https://stackoverflow.com/questions/1431812

  •  07-07-2019
  •  | 
  •  

سؤال

وطيب، سؤال بسيط: 

<div onclick="javascript:manualToggle(this)">
    <span>Allowed to click</span>
    <span>Not allowed to click</span>
    <span>Allowed to click</span>
</div>

وبدون تكرار manualToggle إلى يمتد 2 أن يسمح لفوق، كيف يمكنني منع "غير مسموح للنقر" تمتد من اطلاق انها شعبة الأم الحدث onClick عندما يتم النقر عليه؟

هل كانت مفيدة؟

المحلول

وتحتاج إلى معالج الحدث (فإنه من السهل جدا القيام بذلك في شيء من هذا القبيل مسج) التي يمسك النقرات ليمتد داخل شعبة ويطلق فقط وظيفة إذا، على سبيل المثال، تمتد لديه / لديها ليس فئة معينة.

نصائح أخرى

وإعطاء فترة معرف إرفاق الحدث onClick إليها واستخدامها

وعينة مسج 

$("#spn2").click(function(event){
  event.stopPropagation();  
});

event.stopPropagation () : توقف محتدما ل حدث إلى عناصر الوالدين، ومنع أي معالجات الأم من إخطاره الحدث.

ومن المنطقي لاستخدام المكتبة ولكن من دون يمكنك أن تجرب هذا (مع تحرير صفحة كاملة لاختبار): 

<html><head></head>
<body>
<script type="text/javascript"><!--
function manualToggle(val)
{
    alert(val.id);
}

--></script>

<div id="test" onclick="manualToggle(this);">
    <span>Allowed to click</span>
    <span onclick="event.cancelBubble=true;if (event.stopPropagation) event.stopPropagation();">Not allowed to click</span>
    <span>Allowed to click</span>
</div>
</body>
</html>

موتولز يمكنك استخدام stopPropagation الأسلوب: 

$('myChild').addEvent('click', function(ev){
    ev.stopPropagation(); // this will prevent the event to bubble up, and fire the parent's click event.
});

http://mootools.net/docs/core/Native/ الحدث # الحدث: stopPropagation

وانظر أيضا هذا سؤال مشابه جدا: <لأ href = "https://stackoverflow.com/questions/985389/how-can-i-stop-an-onclick-event-from-firing-for-parent-element ، وعندما الطفل هو-كليك "> كيف يمكنني التوقف عن هذا الحدث عند _ النقر من اطلاق للعنصر الأصل عند النقر الطفل؟

ولقد كان نفس القضية وتعذر الحصول على مسج للعمل بحيث كنت بسيط جافا سكريبت: 

document.getElementById("your_span").addEventListener("click", (event) => {
    event.stopPropagation();
});

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

<الصورة> الحل المحتمل: إعطاء البائع العمر وتحقق ما إذا كان يسمح للهوية الذي تم النقر عليه ليكون النقر في وظيفة الخاص بك

وفكرة سيئة: أنت لا تعرف أي مدى يتم النقر منذ استدعاء وظيفة من شعبة بك ...

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top