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/)
Utilizing event.stopImmediatePropagation() as well as avoiding jQuery libraries and binding events on load:

<http://jsfiddle.net/QFWN2/>

```
function modify(el, e){
 alert(el.value);   
 e.stopImmediatePropagation();

}

```

and

```
<button class="edit-btn" value="edit" onclick="modify(this, event);"></button>
<button class="delete-btn" value="delete" onclick="modify(this, event);"></button>

```