12

ここに投稿されたメソッドを適応させて、マウスオーバーでDOM要素を強調表示しました。たとえば、inspectはjQueryを使用しません。

これまでにこのソリューションを考え出しました：http：//jsfiddle.net/pentium10/Q7ZQV/3/

これはChromeとFirefoxで機能しますが、IEでは期待どおりに機能しません。

  1. たとえばIE9では、タグラインのようなマイナーな要素（例：：javascript, html, domまたはトップラインのような：）ではハイライトは発生しません。chat, meta, faq

    javascriptタグの上にマウスを置くと、大きなdivがハイライトされ、これは間違っており、Firefoxで見られるようになります。

  2. IE8および7では起動しないため、修正する必要のあるもう1つの問題です。

4

5 に答える 5

12

私はあなたの実装に問題を見つけたと思います。ただし、その前に、45行目にあるグローバルスコープリークを解消することをお勧めします。セミコロンがあり、おそらくコンマが必要です。

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

また、IE9以降でArray＃indexOf~no.indexOf(e.target)がサポートされているため、IE8以下では失敗することを知りたいと思うかもしれません。

今あなたの問題に。現在のブラウザ（Firefoxを含む）は知っていpointer-events:noneます。IE10のサポートでさえまだ不明です。ポインタイベントをサポートしていないブラウザは、オーバーレイでカバーされている要素でイベントを発生させることはありません。mouseenter

IE7 +をサポートするdocument.elementFromPoint（）を使用すると、バインドmousemove、レイヤーの非表示、カーソルの下の要素の検出、mouseover必要に応じて起動することができます。この道を進む場合は、mousemoveイベントの抑制を検討してください（limit.jsを参照）。

このようなもの。

アップデート：

document.elementFromPoint()vsのパフォーマンス比較は行っていませんpointer-events:none。現在のブラウザ（Firefox、Chromeなど）は両方を処理できますが、InternetExplorerはこのdocument.elementFromPoint()アプローチでのみ機能します。物事を単純にするために、私はpointer-events:none最新のブラウザーの代替ルートを実装しませんでした。

于 2012-06-17T16:00:55.870 に答える
9

IEでは、背景（つまりbackground: transparent）とグラデーションフィルターセットを持たない要素はマウスイベントを受信しないことがわかりました。デモ

オーバーレイにRGBa背景色を使用しており、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、イベント名の前に「on」を付ける必要があります。

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

  • イベントのターゲットを見つけるには、のevent.srcElement代わりににアクセスする必要がありますevent.target。

  • rodneyrehmが述べたように、Array.indexOfサポートされていません。

したがって、IE7-9でも機能するソリューションのバージョンは次のとおりです。http：//jsfiddle.net/jefferyto/Q7ZQV/7/

（ところで、複数の行にまたがるインライン要素の強調表示は間違っています。たとえば、「他の質問を参照...」行の「自分の質問をする」リンクなどです。）

于 2012-06-20T08:13:29.743 に答える
2

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

ルーティーン：

  • ブラウザがIEであるかどうかを具体的に確認し、次のアクションを実行しました。
  • mousemoveを使用する関数にイベントを割り当てましたdocument.elementFromPoint(x, y)。
  • 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リンクを投稿します。

于 2012-06-17T15:28:21.890 に答える
1

outlineオーバーレイのプロパティを変更することで、つまり、オーバーレイを透明にし、サイズ計算の調整に依存するか、またはに依存することで、マウスイベントがオーバーレイによってインターセプトされるのを回避できますborder。

background:transparent;
outline:1px dotted red;

フィドル

または、オーバーレイに依存することはできませんが、「マウスオーバー」するたびに要素自体のクラスを切り替えることができます。それへの参照をキャッシュすると、「マウスアウト」されたときにクラスを削除し、すすぎ、繰り返します。それがどれほど実行可能であるかを確認するために、もう少しアイデアをいじります。

于 2012-06-18T02:41:39.697 に答える
0

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

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

最大の違いはCSSにあることです。IEは苦痛です。MSはそれrgbaが何らかの理由で良くないと信じています。彼らは、地球上の人間が理解できないCSSを書くことを好むようです。

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

半透明の灰色のオーバーレイを提供します。正直なところ、私はここで私の答えのこの部分を見つけました。

ポインタイベントに関して言えば、これを回避する唯一の方法であるAFAIKは、イベントを処理する別のイベントリスナーですonclick。

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

これがあなたの途中であなたを助けることを願っています...

于 2012-06-20T11:55:00.673 に答える