Question

我在标签内部嵌入了很少的元素（比如输入，段落，radiobutton任何元素）。此标签的父级是div标签。应用事件处理程序，用于标签内的所有元素以及除标签标记之外的父div。在所有事件处理程序中也应用了stopPropagation。但是当我点击label中的任何元素时，会调用相应的事件处理程序，因为stopPropagation在那里，所以它限制了父事件处理程序的调用。直到这里很好。但问题是它还在调用其兄弟姐妹的事件处理程序。

 <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();
    });

});

当我点击段落时，它的事件处理程序和输入类型的处理程序也会被调用。当我使用类自定义单击span时，由于它没有事件处理程序，因此首先调用parent，然后调用后面的输入类型处理程序。

您可能会问的问题是嵌入p，输入和标签内的所有内容的目的是什么。我们使用自定义input type="file"我们在输入类型文件上覆盖标签数据，但必须触发标签输入类型文件上的onclick。对于同样的我在标签

中嵌入元素

只是想知道为什么即使我使用stopPropagation也会调用两个事件处理程序。

作为参考，我创建了jsfiddle：http://jsfiddle.net/x7xQg/29/

提前致谢

Answer 1

在事件处理程序中添加return false;可以解决它。

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

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

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

jQuery代码

1 个答案: