Webkit: 上下文菜单 / 点击处理错误的解决方法?

3
我正在尝试以跨浏览器的方式处理锚元素上的contextmenu和click处理程序,但这非常困难。
问题在于:如果在contextmenu事件处理程序中调用preventDefault(),则不同的浏览器会有不同的行为。所有浏览器都正确地不显示其浏览器的默认上下文菜单。然而,在Chrome和Safari中,仅当取消contextmenu事件时,浏览器才会跟随元素的click事件。
当我从contextmenu处理程序取消contextmenu事件时,我不希望同一元素上发生连续的click事件。有没有一种简洁的方法来解决这个问题?无论是在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);
    }

1
你必须使用POJ吗?还是可以使用jQuery或其他框架?这样你可能可以使用除了'a'标签之外的东西来实现这个。 - Eonasdan
1
如果jQuery或任何其他框架可以解决这个问题,我会非常感兴趣知道!我尝试了jQuery中提供的所有弃用和新方法来绑定事件,但它们都无法解决我认为是WebKit bug的问题。 - Kunal Gupta Amc
1
目前,最干净和最通用的解决方法可能是在上下文菜单处理程序中创建一个短暂的拦截元素来使点击无效,但我希望有更干净的解决方案! - Kunal Gupta Amc
1个回答

1

1
谢谢!- 1)jQuery上下文菜单插件在Chrome中实际上根本不显示上下文菜单。(在Firefox中可以工作!) - Kunal Gupta Amc
1
  1. 在Chrome/Safari中,右键或左键单击上下文菜单演示也无法工作!(在Firefox中可以工作!)
- Kunal Gupta Amc
1
如果你确实需要一个href,例如为了在浏览器状态栏中显示URL并具有跨浏览器和机器人兼容性等功能,那么你别无选择,只能使用锚标签。这很困难! - Kunal Gupta Amc
1
我刚刚在Chrome和IE9中尝试了他们的两个演示页面,对我来说都很正常。 - Eonasdan
1
Eonasdan,这可能是Mac的一个bug! - Kunal Gupta Amc

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接