javascript - 排除 Javascript/DOM 中的元素

Question

鉴于 html/css/javascript/jquery 如下，当我点击“#bbb”时事件仍然触发。

有没有办法避免这种情况的发生？

<div id="aaa" style="position:absolute; width:100%; height:100%; background-color:#f00;">
   <div id="bbb" style="height:25%; width:25%; background-color:#0f0; margin:0 auto;">
   </div>
</div>

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

Answer 1

给你:

$( '#aaa' ).click(function (e) { 
    if ( e.target !== this ) { return; }
    alert( 'aaa clicked' );
});

e.target 指向触发点击事件的 DOM 元素。 this 指向 #aaa 元素(因为它是他的点击处理程序)。因此，这条线

if ( e.target !== this ) { return; }

如果未直接点击 #aaa 元素，将提前终止点击处理程序。

现场演示: http://jsfiddle.net/qbDZy/