jquery - 即使在使用 stopPropagation 之后，标签内元素的事件处理程序也会被执行

Question

我在标签中嵌入了很少的元素(如输入、段落、单选按钮等任何元素)。这个标签的父标签是 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/

提前致谢

Answer 1

将 return false; 添加到您的事件处理程序即可解决。

同时添加 event.preventDefault(); 以覆盖所有浏览器。

http://jsfiddle.net/x7xQg/30/