0

それはいくつかの単純な問題のようですが、私はそれを数時間探していて、答えを見つけることができません. マウスオーバーが機能する場所でマウスアウトまたはマウスリーブが機能しないのはなぜですか? コードは次のとおりです。

HTML:

<div ng-app="test">
    <div class="testdiv" data-test-mouseout=""></div>
</div>

CSS（この場合は重要ではないと思います）：

.testdiv {
    width: 100px;
    height: 50px;
    margin: 25px;
    background: yellow;
    position: relative;
}
.testHere {
    position: absolute;
    padding: 0;
    margin: 0;
    background: red;
    width: 100%;
    height: 10px;
    top: -5px;
    left: 0px;
}

JS:

var app = angular.module('test', []);
app.directive('testMouseout', function ($compile) {
    return {
        link: function (scope, iElement) {
            iElement.bind('mouseover', function () {
                iElement.html('<div data-test-mouseout-here="" class="testHere">        </div>');
                $compile(iElement.contents())(scope);
            });
        }
    };
});
app.directive('testMouseoutHere', function () {
    return {
        link: function (scope, iElement) {
            iElement.bind('mouseout', function (e) {
                e.target.style.backgroundColor = 'blue';
                console.log('mouseout');
            });
        }
    };
});

わかりました、それは何をすべきですか？黄色の div 100x50px が表示され、マウスオーバーすると、新しい赤い div が子として内部に表示されます。この赤い div にはマウスアウト バインディングがあるため、console.log "mouseout" のはずですが、発生しませんでした。しかし、2 番目のディレクティブで mouseover によって mouseout を置き換えると、機能します。それは変だ。

最初のディレクティブ内のテンプレートに ngMouseout/ngMouseleave を入れようとしましたが、同じ問題がありました。ngMouseout/ngMouseleave が機能しませんでした ngMouseover が機能しました。

ここにフィドルがあります：http://jsfiddle.net/rGAqw/

プランカーでも同じ: http://plnkr.co/edit/JPiHYO79QaNrJerMM59a

4

1 に答える 1

3

「黄色」または含まれているボックスの「マウスオーバー」イベントが優先されます。マウスが黄色のボックス上を移動しているため、「赤い」ボックスが再作成され続けます。したがって、赤いボックスを離れる機会がありません。testMouseoutHereディレクティブを「mouseover」にバインドするように変更すると、それが機能していることがわかりますが、「mouseout」または「mouseleave」に戻すと何も起こりません。「黄色」のボックスで「mouseover」イベントへのバインドを解除すると、機能します。

iElement.bind('mouseover', function () {
    iElement.html('<div data-test-mouseout-here="" class="testHere"></div>');
    $compile(iElement.contents())(scope);

    iElement.unbind('mouseover');
});

http://jsfiddle.net/rGAqw/2/

于 2013-09-04T16:22:32.737 に答える