Question

我正在尝试为child 中的任何children内的任何div绑定一个事件，除了，指定的child以下内容：

$(document).ready(function(){

  $("#holder").find('*').each(function(){


    if($(this).context.nodeName !== "SPAN"){
      $(this).click(function(){
        window.console.log('s');
      });
    }
  });

});

但是，由于SPAN位于元素内，因此仍会调用click事件。有没有办法解决这个问题？

我有一个演示on JSBin

Answer 1

添加else条件以取消点击（如果是跨度

）

if($(this).context.nodeName !== "SPAN"){
  $(this).click(function(){
    window.console.log('s');
  });
}
else {
  $(this).click(function(e){
    e.stopPropagation(); // negate click
  });
}

Answer 2

您在所有p块上放置了一个点击处理程序。 span位于p块之一。它获取了click事件，但对它没有任何作用，然后冒泡到p。

您需要在span上放置一个点击处理程序，然后让它吞下该事件。致电event.stopPropagation()。

http://api.jquery.com/event.stoppropagation/

Answer 3

试试这个：

$(document).ready(function(){
  $("#holder").find('*').on('click', function(e){
     if($(e.target).is('span')){
        return;
     }else{
        console.log('s');
     }
  });
});

Demo

我们在#holder找到所有元素，并在除click之外的每个节点上绑定span事件。

Answer 4

您遇到的内容称为Event Bubble。当触发时，孩子们的事件将被冒泡到容器中，以了解更多信息。请阅读What is event bubble?

What is the event.stopPropagation used for?

希望它有用。

Answer 5

您可以查看事件来源的type，并在事件来源为span时跳过事件处理程序代码。

<强> Live Demo

$(document).ready(function(){      
  $("#holder *").click(function(event){
    if(event.target.tagName == 'SPAN') return;
    window.console.log('s');
  });      
});

Answer 6

您可以编写此代码，以便在单击span时停止将事件传播到下一级别：

$("#holder span").click(function(event,v){
  event.stopPropagation();
});

Answer 7

请你试试这个：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <meta charset="utf-8">
<script type="text/javascript">
$(document).ready(function(){

  $("#holder").find('*').each(function(){

    if($(this).context.nodeName != 'SPAN')
    {
      $(this).click(function(e){
        window.console.log('s');
      });
   }
else
{
 $(this).click(function(e){
         e.stopPropagation(); 
      });

}
  });

});
</script>
  <title>JS Bin</title>
</head>
<body>
  <div id="holder">
    <p>some text</p>
    <p>might say</p>
    <p>that being</p>
    <p>in <span annid="1" style="font-weight:bold">space</span></p>
    <p>is like</p>
    <p>communicating with</p>
    <p>dead pixels</p>
  </div>
</body>
</html>

代码中的问题是事件传播，点击事件是从<p>事件传播的。这是因为span位于<p>元素

内

希望这会有所帮助..

Answer 8

您可以使用：

$("#holder").find("*:not(span)").on('click', function() { ... });

JQuery点击任何孩子的任何孩子，除了

8 个答案:

Demo