jquery - 如何在jquery中为当前项目设置事件并忽略父项？

Question

我有以下 HTML 结构。我将在一个项目上设置一个 mouseup 事件并获取父项，但这会将所有父项返回给我，因为它在所有 .dd- 上运行 mouseup 事件item 类。

<div class="dd" id="nestable">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>
                <li class="dd-item" data-id="4"><div class="dd-handle">Item 4</div></li>
            </ol>
        </li>
    </ol>
</div>


$(".dd-item").on("mouseup",function(){
alert($(this).attr("data-id"));
})

上面的代码向我返回更多警报，但我只需要第一个(当前项目的父级)。

如何解决？

Answer 1

事件气泡 (there are some exceptions)。您需要停止事件的传播:

$(".dd-item").on("mouseup", function(event) {
  event.stopPropagation();
  console.log($(this).attr("data-id"));
});

相关问题:What is event bubbling and capturing?