1

我有以下 div 结构：-

<div id="a" onclick="function1();">
<div id="b">
</div>

<div id="c">
</div>
</div>

当然，点击“a”会触发function1()，因为“b”和“c”位于“a”内部，所以点击“b”或“c”时，也会触发function1()。

实际上，我不希望在单击“b”时触发 function1()。我尝试使用 z-index 使“b”非常高于“a”，但这没有帮助。

我正在寻找一种类似于以下的方式：-

 <div id="b" onclick="function1() return false"></div>
4

3 回答 3

1

简单地：

$('#a').children().on('click', function(event) {
   event.stopPropagation();
});

在这里，您有一个演示Fiddle。

于 2013-07-13T17:05:26.213 回答
0

您必须查看事件的目标。

使用您的 HTML：

<div class="a">
  <div class="b">Hello</div>
  <div class="c">World</div>
</div>

您可以使用这个 Javascript (jQuery)：

$('.a').on('click', function(event){
  var $target = $(event.target);
  if($target.is('.a')){
    alert('You actually clicked .a');
  } else {
    alert('You did not click .a');
  }
});

这是一个使用 jQuery 的快速演示。

http://jsbin.com/ijinuz/1/edit

于 2013-07-13T16:52:48.017 回答
0


您可以通过event将函数集传递给 来做到这一点onclick，并检查是否event.target.id !== "b"： 

<!DOCTYPE html>
<html>
    <head>
        <title>asdf</title>
    </head>
    <body>
        <div id = "a" onclick = "doSomething(event);">
            div "a"
            <div id = "b">
                div "b"
            </div>
            <div id = "c">
                div "c"
            </div>
        </div>


        <script type = "text/javascript">
            function doSomething(e) {
                            if (e.target.id !== "b") {
                                alert(e.target.id);
                            }
            }
        </script>
    </body>
</html>


这是jsfiddle。

于 2013-07-13T17:03:57.927 回答