我正在嘗試使用contextmenu &以跨瀏覽器的方式在錨點元素上單擊處理程序,並且證明確實很困難。Webkit:contextmenu/click handling bug解決方法?
這裏的問題:如果preventDefault()
被稱爲從一個contextmenu事件處理程序contextmenu事件,瀏覽器的行爲不同。所有瀏覽器都不會顯示瀏覽器的默認上下文菜單。然而,在Chrome瀏覽器& Safari中,瀏覽器會遵循該元素的單擊事件(並且只有在contextmenu事件被取消的情況下)。
當我從contextmenu處理程序取消一個contextmenu事件時,我不希望在同一個元素上觸發連續的單擊事件。有沒有一種乾淨的方式來解決這個問題?既不在contextmenu處理程序返回false也不在調用stopPropagation函數緩解問題!
Here是一個奇怪的故障演示(使用Webkit的檢查或螢火蟲看到痕跡)
這裏有一個答案:使用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);
}
你** **已使用POJ?或者你可以使用jQuery或其他框架?那麼你可能可以使用其他的'a'標籤來完成這個 – Eonasdan
如果jQuery或任何其他框架確實解決了這個問題,我會非常有興趣知道!我嘗試過使用jQuery中的綁定事件,但它們都不能解決我認爲是WebKit的錯誤。 –
目前,解決這個問題的最清潔和最普遍的方法可能是在上下文菜單處理程序中創建一個臨時攔截元素,使點擊無效,但我希望能有一個更清晰的解決方案! –