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/)
This is because the event is fired from clicking on the `li` tag. 

Is there any real purpose for having a click handler on the `li`? What functionality and purpose does it serve? If you have event handlers on the buttons, you **shouldn't** need another event handler attached to it's parent element. You could, but there's no real purpose, especially when you're just showing an alert. However, I can't imagine any real use for it, semantically or realistically for a website of any kind.

If you want to solve this, do the following with jQuery.

```
$('li.item').on('click', function( event ) {

    event.preventDefault();

});

```

or

```
$('li.item').on('click', function( event ) {

    event.stopPropagation();

});

```