【问题标题】: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.targetparentNodes是否是链接。这解决了您提到的 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 可能会有点令人沮丧,因为大多数人不会这样做。鉴于标签,我不应该发表评论。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多