我正在尝试以跨浏览器的方式处理锚元素上的contextmenu和click处理程序,但这非常困难。
问题在于:如果在contextmenu事件处理程序中调用preventDefault(),则不同的浏览器会有不同的行为。所有浏览器都正确地不显示其浏览器的默认上下文菜单。然而,在Chrome和Safari中,仅当取消contextmenu事件时,浏览器才会跟随元素的click事件。
当我从contextmenu处理程序取消contextmenu事件时,我不希望同一元素上发生连续的click事件。有没有一种简洁的方法来解决这个问题?无论是在contextmenu处理程序中返回false还是调用stopPropagation函数都不能缓解这个问题! 这里有一个带有奇怪故障的演示(使用Webkit检查器或Firebug查看跟踪)。
这里有一个答案:使用jQuery而不是POJ来清理宽度/高度相关的内容:
问题在于:如果在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);
}