z順のHTML要素を扱うときにJavascriptイベントのフォールスルーを無効にする

私は愚かな(そしてうまくいけば簡単に修正された)問題を持っています。私はこれから説明しようとします。

The scenario-> I am trying to create a context menu using HTML/CSS/JS. Just a DIV with a high z-order that appears where a user right-clicks. Simple, and that portion works. The portion which does not is my attempt to make the menu disappear if the user clicks somewhere where a context menu is not supported; I am attempting to achieve this end with a general function in the BODY tag that fires onclick. Since the BODY tag is given a z-order of -1, and any other tags which might trigger the context menu to appear are given a higher z-order value, my hope was that if I right-clicked an element with a z-order of, say, 3, then it would fire the showMenu() function; instead, it appears that it does this, as well as passes the event to the underlying BODY tag, which causes the menu to become hidden again.

あなたが想像するように、それは信じられないほどイライラしています。誰もがイベントが通過するのを防ぐ方法を知っていますか? (INPUTボタンは見たいものですが、Aアンカーは似たようなものですが、まだ動作するようにはコーディングされていません)。

HTMLコードは次のとおりです。

http://pastebin.com/YeTxdHYq

ここに私のCSSファイルがあります:

http://pastebin.com/5hNjF99p

これは、IE、Firefox、Chromeの問題と思われます。

0

1 答え

DOMイベントの多くは、下部のオブジェクトからコンテナオブジェクトを介して「バブル」し、最終的にはボディに到達します。しかし、これをやめることができます - 要素のクリックハンドラに次のコードを追加してみてください:

e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

...ここで、 e は、イベントオブジェクトを表す関数に既にある変数です。

event.stopPropagation(); should work in modern browsers, but the old IE way was event.cancelBubble = true; - to be safe you can just do both (but as shown above check that .stopPropagation is defined before trying to call it).

上記のコードを追加すると、要素をクリックすると、関数はコンテナオブジェクト(本体を含む)をクリックして見るのを止めます。他の場所をクリックすると関数が呼び出されないので、本文はクリックを処理します。

これに関する詳細は、 MDN および QuirksMode.org

注:私はzオーダーの問題を無視しました。この場合は問題ではないと思います。すべての要素はボディの子孫なので、(停止しない限り)zに関係なくイベントが本体にバブルすることが予想されます-注文。

1
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript