javascript - 当我只定义父div的点击功能时，如何使子div不发出警报

Question

这是我的代码:

<div id="a" style="position:absolute;width:200px;height:200px;background:red;word-wrap:break-word;">
            <div id="b" style="width:50px;height:50px;background:blue;"></div>
</div>

脚本是:

$( "#b" ).draggable({ containment: 'parent' });
$('#a').click(function(e){
        alert(e.pageX)
        //return false;
    })

我想在点击红色 div 时发出警报，而不是蓝色 div ，

演示在这里:http://jsfiddle.net/KwYjr/2/

谢谢

Answer 1

测试 e.target 的 ID。

示例: http://jsfiddle.net/patrick_dw/KwYjr/6/

$('#a').click(function(e){
    if( e.target.id === 'a' ) {
        alert(e.pageX);
    }
    //return false;
});

另一个选择是向调用 e.stopPropagation() 的 #b 元素添加一个点击处理程序，但我不推荐这样做。有比仅仅为了停止传播而分配处理程序更好的方法(如上面的方法)。

<小时/>

编辑:

运行上述测试的另一种方法是直接比较元素，而不是使用其 ID:

示例: http://jsfiddle.net/patrick_dw/KwYjr/8/

if( e.target === this ) {
    alert(e.pageX);
}