javascript - 如何在一个元素内包含两个单独的 onClick 事件？

Question

我有一个 <div>另一个元素 <div> .我在包含的 div 上有一个 onClick 事件，但我希望内部 div 忽略该 onClick 事件，因为我在那个事件中有一个单独的 onClick 事件。下面是一些示例代码:

<div id='container' onClick='javascript:function1();'>
  outside of the inside div
  <div id='inside' onClick='javascript:function2();'>
    inside the inside div
  </div>
</div>

想象一下容器是一个大盒子，里面的div是它里面的一个小盒子。基本上代码现在的工作方式是，每次我单击“内部”时，它都会触发 onClick，甚至是“容器”和“内部”。我不想要那个；我希望每个人都有自己的 onClick 事件。这可能吗？

Answer 1

在 function2() 中放入 return false 以防止事件冒泡。

由于您在标记中提到了 jquery，您可以从 HTML 标记中删除事件处理程序并将其放入 document.ready

HTML

<div id='container'>
  outside of the inside div
  <div id='inside'>
    inside the inside div
  </div>
</div>

j查询

$(function(){
    $("#container").click(function(){
        function1();
    });

    $("#inside").click(function(){
        function2();
        return false;
    });    
});

您还可以使用 event.stopPropagation()而不是返回 false。