2011-12-08 93 views
3

我正在嘗試使用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); 
    } 
+1

你** **已使用POJ?或者你可以使用jQuery或其他框架?那麼你可能可以使用其他的'a'標籤來完成這個 – Eonasdan

+1

如果jQuery或任何其他框架確實解決了這個問題,我會非常有興趣知道!我嘗試過使用jQuery中的綁定事件,但它們都不能解決我認爲是WebKit的錯誤。 –

+1

目前,解決這個問題的最清潔和最普遍的方法可能是在上下文菜單處理程序中創建一個臨時攔截元素,使點擊無效,但我希望能有一個更清晰的解決方案! –

回答

1

通過使用其他元素,例如span,您不必擔心默認操作,因爲即使默認情況下也不會有點擊。我發現這兩個jQuery插件可能會爲你做的伎倆:

http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

http://beckelman.net/post/2008/11/04/Right-or-Left-Click-Context-Menu-Using-jQuery-Demo.aspx

+1

謝謝! - 1)jquery上下文菜單插件實際上在Chrome中根本不顯示上下文菜單。 (適用於Firefox!) –

+1

2)在Chrome/Safari中,右鍵或左鍵點擊上下文菜單演示也不起作用! (適用於Firefox!) –

+1

如果您確實需要href,例如,要在瀏覽器狀態欄中顯示url以及具有跨瀏覽器和機器人的兼容性等,您別無選擇,只能使用錨標籤。這很難! –