Mouseoverイベントは、IE9でサブ要素のイベントが生成されず、イベントはIE8で開始されません。

Question

highlight a DOM element on mouse over, like inspect doesにを投稿しました。jQueryを使用していません。

は、我々はこれまでのところ、この解決策を考え出した： http://jsfiddle.net/pentium10/Q7ZQV/3/

これはChromeとFirefoxの上で動作するように縫い目が、IEで期待どおりに動作しません。 IE9で

1. ハイライトは、タグラインなどのような微量元素では発生しません。例えば：私のマウスはjavascriptのタグの上に大きなdiv要素がhighligthedされている場合chat, meta, faq

   ：javascript, html, domなどトップラインこれはwrongあり、それはそれは我々が

を修正する必要がある別の問題であるので、それは、起動しない like we see in Firefox

IE8で

と7でなければなりません

Answer 1

IEでは、背景のない要素（すなわちbackground: transparent）とGradient filterの要素はマウスイベントを受けないことが判明しました。 Demo

オーバレイにRGBa background colourを使用していて、IEのRGBaカラーの回避策の1つがグラデーションフィルタですので、これはうれしい偶然です。 （IE用）のオーバーレイでこれらのスタイルを設定することで

：

background: transparent; 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */ 
zoom: 1; 

マウスイベントがオーバーレイを通過して、基礎となる要素に、マイナー/インナー要素が正しく強調表示されます。 IE7/8に存在している

その他の問題は：

• element.attachEventを使用して、イベント名が "オン" で始まるする必要があります

  document.body.attachEvent('onmouseover', function(e) { ... }) 
  

• target of the eventを見つけるには、 event.targetの代わりにevent.srcElementにアクセスする必要があります。

• rodneyrehmと同様に、Array.indexOfはサポートされていません。

は、だからここにも、IE 7-9で働くあなたのソリューションのバージョンです：http://jsfiddle.net/jefferyto/Q7ZQV/7/

（BTWハイライトは、例えば、複数行にまたがるインライン要素のために間違っている「あなた自身に尋ねます「その他の質問を参照...」行の「質問」リンクを参照してください）

Answer 2

Internet Explorer用の特別なルーチン（IE9でテスト済み、IE8でテストされていない）を使用して、thisを用意しました。しかし、完璧ではありません。同じ要素の中でマウスを動かすと、ルーチンが複数回実行されるときにちらつきが発生します（オーバーレイが完全に消えることもあります）。私はすぐにこれを完璧にすることを望む。

ルーチン：私はdocument.elementFromPoint(x, y)を使用する関数へmousemoveイベントを割り当て

：

• ブラウザはIEだったし、次のアクションを実行した場合、私は、具体的にチェック。
• mouseoverには、即座にオーバーレイを削除するクリア機能が割り当てられました。 （これはマウスが要素の上に残っているにもかかわらず、ちらつき、可能な完全なオーバーレイの除去が発生します。）

要素がポイント関数から

function ep(e) 
{ 
    var ev = {target:document.elementFromPoint(e.clientX, e.clientY)}; 
    handler(ev); 
} 

クリア機能

function clear(e) 
{ 
    cur = null; 
    overlay.style.display='none'; 
} 

フィードバック提案は大歓迎です。私はまだこれに取り組んでおり、更新されたJSFiddleのリンクを投稿します。

Answer 3

あなたの実装で問題が見つかりました。

var target = e.target, 
    offset = findPos(target), 
    width = target.offsetWidth;//target.outerWidth(), 
    height = target.offsetHeight;//target.outerHeight(); 

あなたも興味があるかもしれない。しかし、我々はそれに到達する前に、あなたがライン45であなたが現在グローバル・スコープ・リークのことは自分を治すために必要かもしれませんあなたはおそらくコンマをしたいセミコロンがあり、 IE9以降でArray#indexOfがサポートされているので、~no.indexOf(e.target)はIE8以降では失敗します。

問題が発生しました。現在のブラウザ（Firefoxを含む）はpointer-events:noneです。 IE10のサポートでさえもstill unknownです。ポインターイベントをサポートしていないブラウザーでは、は決してオーバーレイによって覆われた要素のmouseenterイベントを発生させません。

IE7 +のサポートにバインドすると、mousemoveにバインドし、レイヤーを非表示にして、カーソルの下の要素を検出し、必要に応じてmouseoverを発生させることができます。この道を行く場合は、mousemoveのイベントを調整することを検討してください（limit.jsを参照）。

のようなものthis。

アップデート：私はpointer-events:none対document.elementFromPoint()のいずれかの性能比較を行っていない

。現在のブラウザ（Firefox、Chromeなど）は両方とも対応できますが、Internet Explorerはdocument.elementFromPoint()のアプローチでしか動作しません。物事をシンプルに保つために、私は現代のブラウザ用に代替のpointer-events:noneルートを実装しませんでした。

Answer 4

あなたはマウスイベントがすなわちサイズ計算の調整で、それを透明にすることとoutlineに頼るかによって、そのプロパティを変更することで、オーバーレイによって傍受されるのを避けることができ、border：

background:transparent; 
outline:1px dotted red; 

Fiddle'd

代わりに、ではなく、がオーバーレイに頼っている代わりに、 "moused over"するたびに要素自体のクラスを切り替えることができます。それに参照をキャッシュすると、 "マウスが出ている"、すすぎ、繰り返すときにクラスを削除できます。私はそれがどれほど実行可能であるかをもう少し詳しく知りたいという発想に惑わされます。

Answer 5

私はあなたのフィドルを見て、IE8、to be found hereで動作するバージョンをフォークしました。それは特に、ビット単位~との組み合わせで、indexOfを結局のところIEは、すべてのことが好きではないようです何かので、最速の修正は簡単なfor(i=0;i<no.length;i++){}のようです。

JScriptがこのプロパティをsrcElementと呼びますので、先に指摘したように、e.targetはIEでは機能しません。これは理にかなっています。なぜなら、IEのイベントは常にドキュメントにバブルアップするので、すべてのイベントはターゲットではなくソースです。

最大の違いは、あなたのCSSで発見される：再びIEは痛みです：MSはrgbaが何らかの理由で良くないと考えています。彼らは地球上に人がいないというCSSを書く方が好きだと思われます：

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0.3,startColorstr='#4c333333', endColorstr='#4c666666'); 

半透明の灰色のオーバーレイがあります。正直言って、私の答えはhereです。 ...

function noClick(e) 
{ 
    e = e || window.event; 
    if (e.preventDefault) 
    { 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
    } 
    e.returnValue = false; 
    e.cancelBubble = true; 
    return false; 
} 

・ホープこれはあなたの方法であなたを支援します。それはポインタイベント、このラウンドの唯一の方法になると

は、私の知る限り、onclickイベントを処理する別のイベントリスナーであり、