页面中间点击监听器答案

【问题标题】：Page Middle Click Listener页面中间点击监听器
【发布时间】：2015-07-23 18:08:15
【问题描述】：

我需要在使用中键时弹出警报，如果我在链接上单击它，但在页面的任何其他元素（或仅在空白区域）上单击它，它一定不会弹出。

var test = {
pageMiddleClickListener : function(e) {
    if(e.which === 2) {     
        //if (!gContextMenu.onLink) {
            alert('ok');
        //}
    }
}
window.addEventListener("click",test.pageMiddleClickListener,false);

当我在链接上使用鼠标中键时出现警报，但我需要防止这种行为发生在链接上

我需要类似“！gContextMenu.onLink”的东西，但不是上下文菜单（没有）

【问题讨论】：

标签： javascript jquery firefox-addon

【解决方案1】：

您可以通过多种方式测试点击的target 是否为链接。一种方法是检查Element.tagName 是否为A，另一种方法是测试href 属性。事实证明，还需要测试以查看目标的任何parentNodes 是否是链接。

var test = {
    pageMiddleClickListener : function(e) {
        if(e.button === 1) {     
            if (!test.isLinkOrAParentIsLink(e.target)) {
                e.view.alert('ok');
            }
        }
    },

    isLinkOrAParentIsLink : function(el) {
        if (el.tagName === "A") {
            return true;
        } //else
        let parent= el.parentNode;
        while (parent !== null && typeof parent.tagName !== "undefined") {
            if (parent.tagName === "A") {
                return true;
            } //else
            parent= parent.parentNode;
        }
        return false;
    }
}
window.addEventListener("click",test.pageMiddleClickListener,false);

或

    isLinkOrAParentIsLink : function(el) {
        if (el.hasAttribute("href")) {
            return true;
        } //else
        let parent= el.parentNode;
        while (parent !== null && typeof parent.tagName !== "undefined") {
            if (parent.hasAttribute("href")) {
                return true;
            } //else
            parent= parent.parentNode;
        }
        return false;
    }

注意：我将e.which 更改为e.button，因为这是click events 的规范中的内容，MouseEvent.which 是非标准的。请注意，这还需要测试 e.button === 1 而不是 2。

【讨论】：

它现在可以工作，但只适用于几个链接如果链接看起来像：*** 它可以正常工作（警报不pop-up) 但如果链接如下所示，则会弹出警告：***'b> OR *** (Youtube 用它来链接视频)
我已经更新了这个来测试e.target的parentNodes是否是链接。这解决了您提到的 YouTube 问题，并且应该考虑在链接下方具有结构的任何其他问题。我还将删除不再相关的旧 cmets。
我也找到了一个解决方案，而且更简单： if (!e.target.closest("a")) { alert('ok'); }
@user25, 使用Element.closest() 肯定是更少的代码。在使用 MDN 上标记为实验性的功能时，我总是有两种想法。对于 Firefox 扩展，我通常会根据首次支持该功能的时间做出选择，以及是否是在我想通过该插件支持的最旧版本之前/之后。鉴于仅在 Firefox 35.0 中添加了对 Element.closest() 的支持，我会选择不使用它（我通常希望至少支持 Firefox 29，甚至更早版本）。

【解决方案2】：

您可以使用prop 方法检查您是否点击了<a>。

$(this).prop("tagName") == "A"

在你的事件监听器中：

var test = {
   pageMiddleClickListener : function(e) {
       if(e.which === 2) {     

        // not an <a> ?
        if ($(this).prop("tagName") !== "A") {
            alert('ok');
        }
   }
}
window.addEventListener("click",test.pageMiddleClickListener,false);

【讨论】：

jQuery 在 Firefox 插件环境中可用是不寻常的。
好点。我从这篇文章的 jQuery 标签中做了一个假设。
你也很清楚标签就在那里。我必须承认，我什至没有寻找它，因为在 Firefox 附加组件中安装 jQuery 可能会有点令人沮丧，因为大多数人不会这样做。鉴于标签，我不应该发表评论。