我在标签中嵌入了很少的元素(如输入、段落、单选按钮等任何元素)。这个标签的父标签是 div 标签。 为 label 内的所有元素和除 label 标签之外的父 div 应用事件处理程序。在所有事件处理程序中也应用了 stopPropagation。但是,当我单击标签内的任何元素时,将调用相应的事件处理程序,并且由于存在 stopPropagation,它限制了调用父事件处理程序。直到这里都很好。但问题是它也在调用其 sibling 的事件处理程序。
<div class="scroll-content-item" data-pid="1773">
<label>
<span class="custom">Custom</span>
<input type="text" class="text custom_width" id="cust_width" value="960"/>
<p class="para"> This is test para</p>
</label>
</div>
jQuery代码
jQuery(document).ready(function($) {
$('.para').click(function(event) {
alert("paragraph event ");
event.stopPropagation();
});
$('.custom_width').click(function(event) {
alert("input custom width event ");
event.stopPropagation();
});
$('.scroll-content-item').click(function(event) {
alert("parent div event ");
event.stopPropagation();
});
});
当我点击段落时,它的事件处理程序和输入类型的处理程序也会被调用。当我单击带有自定义类的跨度时,由于它没有事件处理程序,因此首先调用父级,然后调用输入类型处理程序。
你可能会问的问题是嵌入 p、input 和所有这些在标签内的目的是什么。我们正在使用自定义 input type="file"
,我们在输入类型文件上覆盖标签数据,但是必须触发标签输入类型文件上的 onclick
。同样,我将元素嵌入到标签中
只是想知道为什么即使我正在使用 stopPropagation
也会调用两个事件处理程序。
作为引用,我创建了 jsfiddle:http://jsfiddle.net/x7xQg/29/
提前致谢
最佳答案
将 return false;
添加到您的事件处理程序即可解决。
同时添加 event.preventDefault();
以覆盖所有浏览器。
关于jquery - 即使在使用 stopPropagation 之后,标签内元素的事件处理程序也会被执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12619535/