0

It seems to be some SIMPLE PROBLEM but I am looking on it for some hours and cannot find the answer. Why mouseout or mouseleave doesnt work where mouseover works? Here is the code:

HTML:

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

CSS (not important in this case I suppose):

.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');
            });
        }
    };
});

Ok, what it supposed to do? It will display yellow div 100x50px and when you mouseover it, then new red div appear inside as an child. This red div has mouseout binding so it should console.log "mouseout", but it doesnt happened. BUT if you raplace mouseout by mouseover in second directive, it works. Thats weird.

I was trying to put ngMouseout/ngMouseleave into template inside first directive, but same problem. ngMouseout/ngMouseleave didnt work ngMouseover worked.

Here is fiddle:http://jsfiddle.net/rGAqw/

Same in plunker:http://plnkr.co/edit/JPiHYO79QaNrJerMM59a

4

1 回答 1

3

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

于 2013-09-04T16:22:32.737 回答