Question

这似乎是一些简单的问题，但我看了几个小时，但找不到答案。为什么mouseover或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绑定所以它应该console.log“mouseout”，但它没有发生。但是如果你通过鼠标悬停在第二个指令中放置mouseout，它就可以了。太奇怪了。

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

这是小提琴：http://jsfiddle.net/rGAqw/

相同的plunker：http://plnkr.co/edit/JPiHYO79QaNrJerMM59a

Answer 1

“黄色”或包含框的“鼠标悬停”事件优先，“红色”框不断重新创建，因为鼠标仍在黄色框上移动，因此您永远不会有机会离开红色框。如果您将 testMouseoutHere 指令更改为绑定到“鼠标悬停”，您将看到它正在工作，但当您将其更改回“mouseout”或“mouseleave”时，没有任何反应。如果您在“黄色”框中取消绑定“鼠标悬停”事件，那么它将起作用。

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/

如果使用mouseout，则指令模板中的AngularJS事件绑定不起作用，但适用于鼠标悬停

1 个答案: