javascript - 单击时跨越子对象

Question

我怎样才能让这个代码只执行它的按钮：

​<span id="spanClicker">

<span id="subClicker">
            [Click Me]        
</span>
​&lt;/span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

像这个小提琴：http: //jsfiddle.net/rpCVy/

Answer 1

http://jsfiddle.net/malet/rpCVy/3/

您可以使用e.stopPropagation()来防止两个元素的点击事件触发。

另外，.live从 jQuery 1.7 开始，该函数已被弃用，.on应改为使用。

Answer 2

这个应该可以的。

http://jsfiddle.net/rpCVy/2/

新的 JavaScript

$(function()
{
   $("#spanClicker").live("click",function()
   {
        alert('Span Clicked');                               
   });                           

    $("#subClicker").live("click",function(e)
      {
            alert('Button Clicked');
            e.stopPropagation();          
      });
});​

关联的匿名函数.click可以将事件作为第一个参数。调用stopPropagation()事件对象的方法来阻止点击事件冒泡到事件目标元素的容器。

Answer 3

这是您要查找的内容：

$( '#subClicker' ).on( 'click', function (e) {
    alert( 'subClicker' )

    // Now here is the magic you want:
    e.stopPropagation( )
} )

如您所料，e.stopPropagation()允许您阻止事件传播到其父元素。