AngularJS：防止在子元素上触发“mouseenter”事件答案

【问题标题】：AngularJS: Preventing 'mouseenter' event triggering on child elementsAngularJS：防止在子元素上触发“mouseenter”事件
【发布时间】：2013-02-23 03:35:06
【问题描述】：

我现在正在使用 AngularJS 框架，但偶然发现了一个问题。我做了一个指令，叫做“输入”。它触发mouseenter 和mouseleave 上的函数。我将它作为属性应用到表格行元素。它现在为每个子元素触发（所有列等），但只有当您将鼠标悬停在表格行上时才会触发它。

这是我的指令的样子：

myapp.directive('enter', function(){
    return {
        restrict: 'A', // link to attribute... default is A
        link: function (scope, element){
            element.bind('mouseenter',function() {
                console.log('MOUSE ENTER: ' + scope.movie.title);
            });
            element.bind('mouseleave',function() {
                console.log('LEAVE');
            });
        }
    }
});

这里是一个例子：http://jsfiddle.net/dJGfd/1/

您必须打开 Javascript 控制台才能查看日志消息。

在 AngularJS 中实现我想要的功能的最佳方法是什么？如果有合理的 AngularJS 解决方案，我更喜欢不使用 jQuery。

【问题讨论】：

这对我来说似乎是一个错误。快速说明一下，您还可以应用名为“ng-mouseenter”/“ng-mouseleave”的 Angular 指令。我的想法是保存最后一个悬停的元素，看看它是否不同。

标签： angularjs mouseover event-bubbling mouseenter

【解决方案1】：

你可以试试这个：

myapp.directive('enter', function () {
    return {
        restrict: 'A',
        controller: function ($scope, $timeout) {
            // do we have started timeout
            var timeoutStarted = false;

            // pending value of mouse state
            var pendingMouseState = false;

            $scope.changeMouseState = function (newMouseState) {
                // if pending value equals to new value then do nothing
                if (pendingMouseState == newMouseState) {
                    return;
                }
                // otherwise store new value
                pendingMouseState = newMouseState;
                // and start timeout
                startTimer();
            };

            function startTimer() {     
                // if timeout started then do nothing
                if (timeoutStarted) {
                    return;
                }

                // start timeout 10 ms
                $timeout(function () {
                    // reset value of timeoutStarted flag
                    timeoutStarted = false;
                    // apply new value
                    $scope.mouseOver = pendingMouseState;
                }, 10, true);
            }
        },
        link: function (scope, element) {
            //**********************************************
            //  bind to "mouseenter" and "mouseleave" events
            //**********************************************
            element.bind('mouseover', function (event) {
                scope.changeMouseState(true);
            });

            element.bind('mouseleave', function (event) {
                scope.changeMouseState(false);
            });

            //**********************************************
            //  watch value of "mouseOver" variable
            // or you create bindings in markup
            //**********************************************
            scope.$watch("mouseOver", function (value) {
                console.log(value);
            });
        }
    }
});

http://jsfiddle.net/22WgG/ 也一样

也改为

element.bind("mouseenter", ...);

和

element.bind("mouseleave", ...);

你可以指定

<tr enter ng-mouseenter="changeMouseState(true)" ng-mouseleave="changeMouseState(false)">...</tr>

见http://jsfiddle.net/hwnW3/

【讨论】：