Question

在我的webapp中，我有一个显示用户选项的列表。每个“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>

我有一个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

Answer 2

这是因为单击li标记会触发事件。

在li上设置点击处理程序是否有任何真正的目的？它的功能和用途是什么？如果按钮上有事件处理程序，则不应该需要另一个附加到其父元素的事件处理程序。你可以，但没有真正的目的，特别是当你只是在显示警报时。但是，对于任何类型的网站，我无法想象它在语义上或现实中的实际用途。

如果要解决此问题，请使用jQuery执行以下操作。

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

    event.preventDefault();

});

或

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

    event.stopPropagation();

});

Answer 3

您需要停止在按钮上传播click事件。

$('.edit-btn').click(function(event){
    alert('edit');
    return false;
};

使用jQuery是一种方法。

Answer 4

最好的答案是远离使用内联脚本。最好使用DOM添加事件侦听器以保持一切清洁。要回答这个问题，您可以return false;阻止事件传播到li元素。

同样，如果将事件绑定到DOM，则可以使用事件对象停止传播：

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

Answer 5

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

Answer 6

利用event.stopImmediatePropagation（）以及在加载时避免jQuery库和绑定事件：

http://jsfiddle.net/QFWN2/

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

}

和

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

按下可点击的列表元素

6 个答案: