1

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

想象有两种事件：

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

另外，假设有 2 种事件处理函数：

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 注册为该事件的侦听器。

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

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

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

4

2 回答 2

2

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

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

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

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

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

在父处理程序上（事件冒泡）

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

在此示例中，#box是元素的子body元素（尽管可能与其他元素之间存在）。当在 上触发点击时#box，处理程序将检查元素，然后是元素的父级，然后是元素的父级的父级等......一直到 DOM 树。这将一直持续到事件停止冒泡或到达树的顶部。

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

于 2013-02-17T22:46:47.980 回答
1

这可以通过一个事件监听器来实现：

window.addEventListener('click', function (e) {
    if (document.getElementById('box').contains(e.target)) {
        alert('Box clicked!');
    } else {
        alert('Not box clicked!');
    }
}, false);

或 jQuery：

$(window).click(function (e) {
    if ($('#box')[0].contains(e.target)) {
        alert('Box clicked!');
    } else {
        alert('Not box clicked!');
    }
});
于 2013-02-17T19:52:15.963 回答