Question: In my webapp, I have a list that shows the user options. Each 'li' is clickable, so that the user can go to the selected option. Also, each li has 2 buttons one to delete and the other to edit. However, whenever I click on the edit or delete button, the li element onclick event is also fired. How can I prevent this?

```
<ul id="filters" class="nomargin">
 <li class="item" data-username="blub" onclick="alert('li clicked')"> 
  <span class="default-view">
   <span class="title">id5</span>
   <span class="control">
    <button class="edit-btn" value="edit" onclick="alert('edit')"></button>
    <button class="delete-btn" value="delete" onclick="alert('delete')"></button>
   </span>
  </span>
 </li>
</ul>

```

I have a jsfiddle with a prototype of it: <http://jsfiddle.net/LkUn9/>

Answer: 
Use `event.stopPropagation();`

```
<ul id="filters" class="nomargin">
 <li class="item" data-username="blub" onclick="alert('li clicked')"> 
  <span class="default-view">
   <span class="title">id5</span>
   <span class="control">
    <button class="edit-btn" value="edit" onclick="alert('edit'); event.stopPropagation();"></button>
    <button class="delete-btn" value="delete" onclick="alert('delete'); event.stopPropagation();"></button>
   </span>
  </span>
 </li>
</ul>

```

Check this [Demo](http://jsfiddle.net/amoljawale/LkUn9/2/)
You've to use event.stopPropagation()

```
    <ul id="filters" class="nomargin">
        <li class="item" data-username="blub" onclick="clickLi()"> 
            <span class="default-view">
                <span class="title">id5</span>
                <span class="control">
                    <button class="edit-btn" value="edit" onclick="clickButton(event);">Edit</button>
                    <button class="delete-btn" value="delete" onclick="return clickButton(event);">Delete</button>
                </span>
            </span>
        </li>
    </ul>
    <script>
        function clickButton(e){
            console.log(e);
            e.stopPropagation();
            console.log('button');
        }
        function clickLi(){
            console.log('li');
        }
    </script>

```