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/)
The best answer to this is to stay away from using inline scripts. It is best to add event listeners using the DOM to keep everything clean. To answer the question, you can `return false;` to stop the event from propagating to the `li` element.

Similarly if you bind the event to the DOM, you can stop the propagation using the event object:

```
function myClickHandler(evt) {
    //do stuff
    evt.preventDefault();
    evt.stopPropagation();
    return false;
}

```