-1

重複の可能性:
子要素がクリックされたときにクリック ハンドラーがトリガーされないようにするにはどうすればよいですか? 

<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ページを持っています。問題は、lesson1 をクリックすると、1 と 2 を示す 2 つのアラートが表示されることです ??!!! <li>両方をクリックしたようなものです.つまり、別のサブをクリックすると<li>（両方ともonclickイベントliestenerがあります）、両方のjavascriptコードが実行されます

4

1 に答える 1

2

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');  
    };
于 2012-11-10T19:48:56.977 に答える