5

我在标签中嵌入了很少的元素（如输入、段落、单选按钮任何元素）。这个标签的父标签是 div 标签。为标签内的所有元素和除标签标签之外的父 div 应用事件处理程序。在所有事件处理程序中也应用了 stopPropagation。但是当我点击标签内的任何元素时，就会调用相应的事件处理程序，并且由于 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();
    });

});​

当我单击段落时，它的事件处理程序和输入类型的处理程序也被调用。当我单击自定义类的跨度时，由于它没有事件处理程序，因此首先调用父级，然后调用输入类型处理程序。

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

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

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

提前致谢

4

1 回答 1

8

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

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

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

于 2012-09-27T10:43:53.833 回答