javascript - 可点击列表元素上的按钮

Question

在我的网络应用程序中，我有一个显示用户选项的列表。每个“li”都是可点击的，这样用户就可以转到所选的选项。此外，每个 li 有 2 个按钮，一个用于删除，另一个用于编辑。但是，每当我单击编辑或删除按钮时，也会触发 li 元素的 onclick 事件。我怎样才能避免这种情况？

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

我有一个带有原型(prototype)的 jsfiddle:http://jsfiddle.net/LkUn9/

Answer 1

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

检查这个Demo