2011-12-08 15 views
3

私はコンテキストメニューで作業しようとしています&アンカー要素のハンドラをクロスブラウザの方法でクリックすると、実際には難しいことが分かりました。Webkit:contextmenu /クリック処理のバグの回避策?

ここに問題があります:contextmenuイベントハンドラからcontextmenuイベントでpreventDefault()が呼び出された場合、ブラウザの動作が異なります。すべてのブラウザは、ブラウザのデフォルトコンテキストメニューを正しく表示しません。ただし、Chrome & Safariの場合、ブラウザは要素のクリックイベントに従います(contextmenuイベントがキャンセルされた場合のみ)。

コンテキストメニューハンドラからコンテキストメニューイベントをキャンセルすると、同じ要素で連続したクリックイベントが発生しないようにします。これを解決する明確な方法はありますか? contextmenuハンドラでもfalseを返さないか、stopPropagation関数を呼び出しても問題は緩和されません!むしろPOJよりクリーンアップ幅/高さのものにjQueryのを使用します:

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); 
    } 

Here


はここに1つの答えです(トレースを参照するには、使用のWebkitのインスペクタまたはFirebugの)奇妙なグリッチとデモです

+1

あなたは** ** POJを使用する必要があります:私はあなたのためにトリックを行う可能性がありますこれらの二つのjqueryのプラグインが見つかりましたか? jqueryやその他のフレームワークを使用できますか?これを達成するために 'a'タグ以外のものを使うことができるかもしれません。 – Eonasdan

+1

jqueryやその他のフレームワークがこの問題を解決するなら、私は本当に知りたいと思っています!私は、それが提供する非難された新しい方法でjQueryでバインディングイベントを試みましたが、WebKitのバグとみなして解決しません。 –

+1

現在のところ、これを解決する最もクリーンで最も普遍的な方法は、クリックを無効にするコンテキストメニューハンドラ内の一時的なインターセプト要素を作成することですが、私はそこにクリーナーソリューションがあることを望んでいました。 –

答えて

1

たとえば、spanのような他の要素を使用すると、既定でもクリックがないため、デフォルトの操作について心配する必要はありません。

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

ブラウザのステータスバーにURLを表示したり、ブラウザとロボットとの互換性を持たせるなど、hrefが必要な場合は、アンカータグを使用します。これは厳しい! –

関連する問題