Question

我想要不同的嵌套onmousedown事件。例如，请考虑以下代码：

<div id="parent" onmousedown="foo();">
  <div id="child1"> </div>
  <div id="child2"> </div>
  <div id="child3" onmousedown="bar();"> </div>
</div>

我希望点击parent div内的任何区域，包括child1和child2，都会导致foo()被调用，如果单击child3，然后应调用bar()。

我到目前为止的尝试表明，上面的示例会在点击foo()时调用child3，这不是我想要的。

Answer 1

在您的HTML中：

<div id="parent" onmousedown="foo();">
  <div id="child1"> </div>
  <div id="child2"> </div>
  <div id="child3" onmousedown="bar(event);"> </div>
</div>

在javascript中

function bar(event)
{
    // usual bar stuff
    event.stopPropagation();
}

Answer 2

<script type="text/javascript">

function bar(evt) {
  // Your stuff here
  if (typeof evt.stopPropagation != "undefined") {
    evt.stopPropagation();
  } else {
    evt.cancelBubble = true;
  }
}

</script>

<div id="parent" onmousedown="foo();">
  <div id="child1"> </div>
  <div id="child2"> </div>
  <div id="child3" onmousedown="bar(event);"> </div>
</div>

嵌套的javascript onmousedown事件

2 个答案: