javascript - 当我点击一个子另一个的（两者都有 onclick 事件 lietener）我为他们两个运行了 javascript 代码

Question

可能重复：
如何防止在单击子元素时触发单击处理程序？

<ul>
  <li>UNIT 1 - Description of unit
    <ul>
      <li id="0" onclick="alert(this.id)" >Module 1 - Description of module
        <ul>
          <li id="1" onclick="alert(this.id)">Lesson 1: Description of lesson</li>
          <li id="2" onclick="alert(this.id)">Lesson 2: Description of lesson</li>
          <li id="3" onclick="alert(this.id)">Lesson 3: Description of lesson</li>
          <li id="4" onclick="alert(this.id)">Lesson 4: Description of lesson</li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>Module 2 - Description of module
        <ul>
          <li>Lesson 1: Description of lesson</li>
          <li>Lesson 2: Description of lesson</li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>Module 3 - Description of module
        <ul>
          <li>Lesson 1: Description of lesson</li>
          <li>Lesson 2: Description of lesson</li>
          <li>Lesson 3: Description of lesson</li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>Module 4 - Description of module
        <ul>
          <li>Lesson 1: Description of lesson</li>
          <li>Lesson 2: Description of lesson</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

我有这个简单的html页面。问题是当我点击第 1 课时，我收到两个警报，显示 1 和 2 ??!!! 就像我确实点击了两个。换句话说，当我点击<li>另一个的子<li>（都有 onclick 事件 lietener）时，我得到了他们两个运行的 javascript 代码

Answer 1

您应该使用该event.stopPropagation()函数来防止事件冒泡。

这是一个小例子：

<div id="div1">
    <div id="div2">123</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

document.querySelector('#div1').onclick = function()
    {
      alert('div1');  
    };

document.querySelector('#div2').onclick = function(event)
    {
      event.stopPropagation();
      alert('div2');  
    };