jQuery 'on()' 命令

Question

所以，我想知道为什么这段代码不能正常工作，我能做些什么来防止这种行为：
如果我需要阻止 parent 的事件传播，而特定 child 被点击，我使用了 method 1，但它似乎不起作用，但 method 2 工作正常不过

//method 1
$(document).on({
  click: function(e) {
    console.log('clicked!');
    e.preventDefault();
    return false;
  }
}, '.hax');
//method 2
/*$('.hax').on('click', function(e){
    e.preventDefault();
    return false;
 });*/
//uncommenting will prevent event propagation

.hax {
  background-color: whitesmoke;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper' onclick='alert("hello")'>
  <div class='hax'>hax!</div>
</div>

Answer 1

方法1是使用事件委托n，所以里面的事件不是直接绑定元素，而是绑定parent ，所以在你的情况下 parent 是 document 。在这种情况下，无论为那个特定元素触发什么事件，它都会从 DOM 树中被追踪，并会在之前执行 parent 调用。在您的情况下，它将首先从 parent 调用 alert .

在 方法 2 中 - 事件直接与元素绑定，parent 的事件仍然会被触发，除非你在处理程序中阻止它，但由于处理程序绑定到目标，你将不会面临任何其他操作（在你的情况下是警报）

更好地了解 Event Delegation

Answer 2

您正在通过方法 1 创建 event delegation，也可以通过以下方式创建：

$(document).on('click', '.hax', function (e) {
    console.log('clicked!');
    e.preventDefault();
    return false;
 });

简要说明事件委托：

Understanding how events propagate is an important factor in being able to leverage Event Delegation. Any time one of our anchor tags is clicked, a click event is fired for that anchor, and then bubbles up the DOM tree(Up to DOM top), triggering each of its parent click event handlers.

这并不意味着你不能用这种方法在这里实现你的目标，但为了让它起作用，你可以为 div.hax 创建一个中间父代，它是 div.wrapper 的后代.我的意思是：

<div class='wrapper' onclick='alert("hello")'>
    <div id="stopHere">
        <div class='hax'>hax!</div>
    </div>
</div>

现在，我们可以使用方法一，但我们只需要在event propagation/event delegation到达div.wrapper之前停止。因此在我们新添加的 div#stopHere:

$("div#stopHere").on('click', '.hax', function (e) {
    console.log('clicked!');
    e.preventDefault();
    return false;
});

jQuery 'on()' 命令

jQuery 'on()' command

javascript

jquery

events

propagation