Question

Possible Duplicate:
How do I prevent a click handler being triggered when a child element is clicked?

<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>

i have this simple page of html. the thing is when I click on lesson1 i got two alerts showing 1 and 2 ??!!!
it’s like i did click on both .in other words when i click on a sub<li> of another <li> (both have onclick event liestener) i get the javascript code runnig for both of them

Answer 1

You should use the event.stopPropagation() function to prevent the event from bubbling.

Here’s a little example:

<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');  
    };