如何对儿童

Question

点击时忽略单击事件

所以，我有以下情形：

<div id="block"> 
Sample text. 
<a href="#">Anchor link</a> 
</div> 

<script type="text/javascript"> 
    $("#block").click(function() { alert('test'); }); 
</script> 

当我点击的div内的任何地方，我发现了“测试”的警报。但是，我想要防止发生这种情况，当我点击“锚链接”。我怎样才能实现呢？

谢谢

Answer 1

您可以停止从链接冒泡了一个额外的处理器，这样的点击次数：

$("#block a").click(function(e) { e.stopPropagation(); }); 

在我们的意见在讨论替代：

$("#block").delegate('a', 'click', function(e){ e.stopImmediatePropagation(); }) 
      .click(function() { alert('test'); });​ 

这将防止任何儿童冒泡链接（当然，不是真的，但是从执行的处理程序），但不是对每个元素创建一个处理程序，这是通过.stopImmediatePropagation()完成。

Answer 2

这就是你需要的：http://api.jquery.com/event.target/。

只是相比较，以检查是否元素被你想要的元素或它的一个子触发。

Answer 3

您可以测试与单击事件对象的target财产节点：

$("#block").click(function(event) { 
    if(event.target.nodeName != 'A') { 
     alert('test'); 
    } 
}); 

我建议阅读Event Properties from quirksmode.org。

Answer 4

$("#block").click(function(event) { 
    if($(event.target).attr('id') == $(this).attr('id')) 
    { 
     alert('test'); 
    } 
}); 

Answer 5

这里是一个演示（jsfiddle）用表格和两个字段：

<div id="container"> 
    <form> 
     <div class="field"> 
      <input id="demo" type="text" name="demo" /> 
     </div> 
     <div class="field"> 
      <input id="demo2" type="text" name="demo2" /> 
     </div> 
    </form> 
</div> 

的代码看起来是这样的：

$(document).ready(function() { 
    $('#container').click(function(evt) { 
     if(this == evt.target) { 
      console.log('clicked container',evt.target); 
      $('#demo').focus(); 
     } else { 
      console.log('clicked child -> ignoring'); 
     } 
    }); 

    $('.field').click(function(evt) { 
     if(this == evt.target) { 
      console.log('clicked field div',evt.target); 
      $(this).find('input').focus(); 
     } else { 
      console.log('clicked child -> ignoring'); 
     } 
    }); 
}); 

您可以单击包含表单的容器将焦点设置在第一个输入字段或输入字段后面以将焦点置于其中。

如果你点击进入该领域，然后点击将被忽略。

上面的代码工作，因为jQuery的调用事件处理程序之前分配DOM节点this，所以你可以很容易地检查通过检查

this == evt.target 

CSS当前事件是否由DOM节点发布：

#container { 
    width: 600px; 
    height: 600px; 
    background: blue; 
} 

.field { 
    background: green; 
}