单击时跨越子对象

Question

如何让此代码仅执行其按钮：

​<span id="spanClicker">

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

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

Answer 1

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

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

同样在旁注中，{j} 1.7不推荐使用.live函数。.on应该使用{{1}}。

Answer 2

以下是您要找的内容：

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

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

您可以猜到，e.stopPropagation()允许您阻止事件传播到其父元素。

Answer 3

应该这样做。

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()方法以阻止click事件冒泡到事件的目标元素的容器。