javascript - 优先于事件处理程序

Question

我不确定这是不是一个好问题，但我很想听听一些关于这个的意见。

假设有两种事件:

A: a mouse click
B: mouse is currently inside a box

另外，假设有两种事件处理函数:

f: console.log("mouse is clicked")
g: console.log("mouse is clicked inside the box")

现在我想让代码做的是，当在框内以外的任何地方单击鼠标时，显示消息“鼠标已单击”。但是，当鼠标在框内单击时，显示消息“鼠标在框内单击”。

我目前的实现方式如下:

if (A) then {f()}
if (A and B) then {g()}

简而言之，我将 f 注册为 A 的监听器，并创建了一个在 A 和 B 都保持时触发的新事件，并为该事件注册了 g ans 的监听器。

当然，当在框内单击鼠标时，我会收到两条消息:“在框内单击鼠标”“点击鼠标”

而不是我正在寻找的单个“在框内单击鼠标”。

是否有任何正式的方式来定义正在发生的事情，以及解决它的最佳方式是什么？简而言之，我希望事件处理程序 g 优先于处理程序 f，这样当 g 被调用时它会抑制 f 的调用。

Answer 1

您需要阅读的是 jQuery 中的事件冒泡和传播。

jQuery 事件处理程序回调将作为参数传递一个事件对象。这包含一个可以调用以停止事件传播或“冒泡”到任何父处理程序的方法。

对于您的示例，这意味着您可以将事件绑定(bind)到“单击鼠标”的窗口/整个文档，然后将事件仅绑定(bind)到“在框内单击鼠标”的框 - 但停止此事件从到达父处理程序。

$(body).click(function() {
    console.log("mouse is clicked");   
});

$("#box").click(function(e) {
    e.stopPropagation();
    console.log("mouse is clicked inside the box");
});

关于父处理程序(事件冒泡)

更具体地说，处理程序本身没有父/子关系——它们只是直接绑定(bind)到 DOM 元素。具有父/子关系的是 DOM 元素本身。

在这个例子中，#box 是 body 元素的子元素(尽管中间可能还有其他元素)。当在 #box 上触发点击时，处理程序将检查元素，然后是元素的父元素，然后是元素的父元素的父元素等等……一直向上到 DOM 树。这将一直持续到事件停止冒泡或到达树的顶部。

通过这种方式，您可以在框中添加另一个元素并添加另一个处理程序来执行相同的操作，即 #button - 如果您停止传播事件，# box 或 body 消息将出现。