移動アクティブな要素は、インターネットエクスプローラーでマウスアウトイベントを失います

StackOverflow https://stackoverflow.com/questions/3686132

質問

私が使用しているライブラリでは、要素がホバリングされたときに要素を前面に移動するタスクがあります。 （私はそれを大きくしているので、それを見る必要があり、マウスアウトしたときにそれを縮小します）。

私が使用しているライブラリには、アクティブな要素に付録チャイルドレンを使用して、DOMの端に向かってさらに先に進み、順番に親を移動するきちんとしたソリューションがあります。

問題は、あなたが動いている要素は、マウスアウトイベントの上にホバリングしている要素が失われることだと思います。マウスはまだノードの上にありますが、マウスアウトイベントは発射されていません。

問題を確認するために機能を剥奪しました。 Firefoxでは正常に動作しますが、IEのどのバージョンでも動作しません。私はここで速度のためにjqueryを使用しています。ソリューションは、普通のJavaScriptである可能性があります。これは、ストリームをバックアップする必要がある可能性があるため、好みです。

ここでは、要素がVMLであり、ライブラリはラファエルであり、TofRontコールを使用しているため、Z-Indexを使用できません。 UL/LIを使用してサンプルを使用して、簡単な例で問題を示します

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
    li
    {
        border:1px solid black;
    }
</style>
</head>
<body>
<ul><li>Test 1</li></ul>
<ul><li>Test 2</li></ul>
<ul><li>Test 3</li></ul>
<ul><li>Test 4</li></ul>
<script>
$(function(){
    $("li").mouseover(function(){
        $(this).css("border-color","red");
        this.parentNode.appendChild(this);
    });

    $("li").mouseout(function(){
        $(this).css("border-color","black");
    });
});
</script>
</body>
</html>

編集： JSペーストビンへのリンクがあります。 http://jsbin.com/obesa4

**編集2：**すべての回答に関するすべてのコメントを参照してください。

役に立ちましたか？

解決

問題はそれです IEハンドル mouseover 違う, 、それはのように振る舞うからです mouseenter と mousemove 要素に組み合わされています。他のブラウザでは、まさにです mouseenter.

マウスがターゲット要素に入ってターゲット要素に入った後でも、見た目を変えて親に再預けました mouseover マウスのすべての動きに対してまだ発射され、要素は再び再び回復し、他のイベントハンドラーが呼び出されないようにします。

解決策は次のとおりです 正しいものをエミュレートします mouseover 行動の行動 onmouseover 一度だけ実行されます。

$("li").mouseover( function() {
    // make sure these actions are executed only once
    if ( this.style.borderColor != "red" ) {
        this.style.borderColor = "red";
        this.parentNode.appendChild(this);
    }
});

例

  1. あなたの範囲のデモ
  2. 例 デモンストレーション mouseover ブラウザ間の違い（ボーナス：ネイティブJavaScript）

他のヒント

私はそれをネストされたdivと親のマウスエンサーイベントで動作させることができました：

<div id="frame">
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>
...
$('#frame').mouseenter(function() {
     $(".box").css("border-color", "black");
});

Raphaelを使用した作業バージョンは次のとおりです。

http://jsfiddle.net/xdrex/

@galambalazsの答えを変更しました。なぜなら、いくつかの要素がまだ保持されるため、Li要素の上に本当に迅速にホバリングした場合に失敗したことがわかったからです mouseover 効果。

トリガーに失敗した要素のホバー状態を削除するソリューションを思いつきました mouseover これらの要素をスタックに押してイベント mouseover トリガーされています。いつでも mouseover また mouseout イベントは呼ばれ、この配列から要素をポップし、その上に配置されたスタイルを削除します。

$(function(){

    // Track any hovered elements
    window.hovered = [];

    $("li").mouseover(function() {
        // make sure that these actions happen only once
        if ( $(this).css("border-color") != "red" ) {
            resetHovered ();  // Reset any previous hovered elements
            $(this).css("border-color","red");
            this.parentNode.appendChild(this);
            hovered.push(this);
        }
    });

    $("li").mouseout(function(){
        resetHovered();  // Reset any previous hovered elements
    });

    // Reset any elements on the stack
    function resetHovered () {
        while ( hovered.length > 0 ) {
            var elem = hovered.pop();
            $(elem).css("border-color","black");
        }
    }
});

IE 11でこのソリューションをテストしました。機能的な例を見つけることができます ここ.

それは不安定であり、IEのみのようです（ただし、VMLもそうです）。親要素の高さが指定されている場合、マウスアウトハンドラーを親に取り付けることができます...しかし、それはあなたの状況では機能しないようです。あなたの最良の選択肢は、隣接する要素でマウスオーバーを使用してそれを隠すことです。

$(function()
{
    $("li").mouseover(function()
    {
        $("li").css("border-color", "black");
        $(this).css("border-color", "red");
        this.parentNode.appendChild(this);
    });
});

またはSVG。 SVGでZ-Indexを使用できます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top