Javascript Webkit:contextmenu/单击处理错误解决方法?

Javascript Webkit:contextmenu/单击处理错误解决方法?,javascript,events,webkit,cross-browser,contextmenu,Javascript,Events,Webkit,Cross Browser,Contextmenu,我正试图以跨浏览器的方式在锚元素上使用contextmenu和click处理程序,事实证明这非常困难 问题是:如果从contextmenu事件处理程序对contextmenu事件调用了preventDefault(),浏览器的行为会有所不同。并非所有浏览器都正确显示其浏览器的默认上下文菜单。然而,在Chrome&Safari中,浏览器随后会跟随元素的单击事件(并且仅当取消contextmenu事件时) 当我从contextmenu处理程序中取消contextmenu事件时,我不希望在同一元素上触

我正试图以跨浏览器的方式在锚元素上使用contextmenu和click处理程序,事实证明这非常困难

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

当我从contextmenu处理程序中取消contextmenu事件时,我不希望在同一元素上触发连续的click事件。有没有干净的方法来解决这个问题?无论是在contextmenu处理程序上返回false,还是调用StopRoppagation函数,都不能缓解这个问题

是一个带有奇怪故障的演示(使用Webkit inspector或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);
    }

例如,通过使用诸如
span
之类的其他元素,您不必担心默认操作,因为即使在默认情况下也不会有单击。我发现这两个jquery插件可能会为您带来好处:


您必须使用POJ吗?或者您可以使用jquery或其他框架吗?如果jquery或任何其他框架确实解决了这个问题,我真的很想知道!我尝试了JQuery中的绑定事件,但它并没有解决我认为WebKIT bug的问题。目前,最干净和最普遍的解决方法可能是在上下文菜单处理程序中创建一个短暂的拦截元素,取消点击。但我希望有一个更干净的解决方案!谢谢1) jquery上下文菜单插件实际上在Chrome中根本不显示上下文菜单。(适用于Firefox!)2)右键或左键单击上下文菜单演示在Chrome/Safari中也不起作用!(适用于Firefox!)如果您确实需要href,例如,在浏览器状态栏中显示url,以及实现跨浏览器和机器人兼容性等,那么您别无选择,只能使用锚定标记。这很难!我刚刚在Chrome和IE9上试用了他们的演示页面,两个页面对meEonasdan都很好,这可能是Mac的错误!