javascript - 如果使用 mouseout，则指令模板中的 AngularJS 事件绑定(bind)不起作用，但可以使用 mouseover

Question

这似乎是一些简单的问题，但我看了几个小时却找不到答案。为什么 mouseout 或 mouseleave 在 mouseover 有效的地方不起作用？这是代码:

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 有 mouseout 绑定(bind)，所以它应该 console.log “mouseout”，但它没有发生。但是，如果您在第二个指令中将 mouseout 替换为 mouseover，则它会起作用。这很奇怪。

我试图将 ngMouseout/ngMouseleave 放入第一个指令内的模板中，但同样的问题。 ngMouseout/ngMouseleave 不起作用，ngMouseover 起作用。

这是 fiddle :http://jsfiddle.net/rGAqw/

同样在plunker中:http://plnkr.co/edit/JPiHYO79QaNrJerMM59a

Answer 1

“黄色”或包含框的“鼠标悬停”事件优先，“红色”框不断重新创建，因为您的鼠标仍然在黄色框上移动，因此您永远没有机会离开红色框。如果您将 testMouseoutHere 指令更改为绑定(bind)到“mouseover”，您会发现它正在工作，但是当您将其更改回“mouseout”或“mouseleave”时，什么也不会发生。如果你取消绑定(bind)“黄色”框中的“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/