Webkit：上下文菜单/单击处理错误解决方法？

发布于 2024-12-19 22:37:13 字数 1484 浏览 3 评论 0原文

我正在尝试使用上下文菜单和以跨浏览器的方式单击锚元素上的处理程序，事实证明这非常困难。

问题是：如果从 contextmenu 事件处理程序中对 contextmenu 事件调用 preventDefault() ，浏览器的行为会有所不同。所有浏览器都不会正确显示其浏览器的默认上下文菜单。在 Chrome 中然而，Safari 浏览器随后会跟踪该元素的单击事件（并且仅当 contextmenu 事件被取消时）。

当我从上下文菜单处理程序取消上下文菜单事件时，我不希望在同一元素上触发连续的单击事件。有没有一个干净的方法来解决这个问题？无论是在上下文菜单处理程序上返回 false 还是调用 stopPropagation 函数都无法缓解该问题！

这里是一个有奇怪故障的演示（使用 Webkit 检查器或 Firebug 查看跟踪）

这是一个答案：使用 jQuery 而不是 POJ 来清理宽度/高度内容：

    function Cancel_Next_Click()
    {
        // Compatibility - Chrome & Safari bug where context click event is followed by an undesired click event

        var Cancel_Next_Click_Element = document.createElement("div");
        Cancel_Next_Click_Element.style.position = "fixed";
        Cancel_Next_Click_Element.style.left = "0px";
        Cancel_Next_Click_Element.style.top = "0px";
        Cancel_Next_Click_Element.style.width = window.innerWidth;
        Cancel_Next_Click_Element.style.height =window.innerHeight;
        document.body.appendChild(Cancel_Next_Click_Element);

        var Cancel_Next_Click_Element_Listener = function() {
                document.body.removeChild(Cancel_Next_Click_Element);
                document.removeEventListener('mouseup', Cancel_Next_Click_Element_Listener, false);
            }

        document.addEventListener('mouseup', Cancel_Next_Click_Element_Listener, false);
    }

原文

I'm trying to work with the contextmenu & click handlers on an anchor element in a cross-browser way, and it's proving really difficult.

Here's the problem: if preventDefault() is called on a contextmenu event from a contextmenu event handler, browsers behave differently. All browsers correctly do not display their browser's default context menu. In Chrome & Safari, however, the browser then follows a click event for the element (and only if the contextmenu event is canceled).

When I cancel a contextmenu event from a contextmenu handler, I do NOT want a successive click event fired on the same element. Is there a clean way to resolve this? Neither returning false on the contextmenu handler nor the calling stopPropagation function alleviate the issue!

Here is a demo with a strange glitch (use Webkit inspector or Firebug to see the trace)

Here's one answer: use jQuery rather than POJ to cleanup width/height stuff:

    function Cancel_Next_Click()
    {
        // Compatibility - Chrome & Safari bug where context click event is followed by an undesired click event

        var Cancel_Next_Click_Element = document.createElement("div");
        Cancel_Next_Click_Element.style.position = "fixed";
        Cancel_Next_Click_Element.style.left = "0px";
        Cancel_Next_Click_Element.style.top = "0px";
        Cancel_Next_Click_Element.style.width = window.innerWidth;
        Cancel_Next_Click_Element.style.height =window.innerHeight;
        document.body.appendChild(Cancel_Next_Click_Element);

        var Cancel_Next_Click_Element_Listener = function() {
                document.body.removeChild(Cancel_Next_Click_Element);
                document.removeEventListener('mouseup', Cancel_Next_Click_Element_Listener, false);
            }

        document.addEventListener('mouseup', Cancel_Next_Click_Element_Listener, false);
    }

分享到QQ

分享到微博