質問: 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の問題と思われます。
回答: 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](http: //www.quirksmode.org/js/events_order.html ) 。 注:私はzオーダーの問題を無視しました。この場合は問題ではないと思います。すべての要素はボディの子孫なので、(停止しない限り)zに関係なくイベントが本体にバブルすることが予想されます-注文。