AngularJS：防止触发子元素的’mouseenter’事件

发布时间：2020-12-17 10:19:54 所属栏目：安全来源：网络整理

导读：我正在玩AngularJS框架,我偶然发现了一个问题.我做了一个名为’enter’的指令.它触发了mouseenter和mouseleave上的函数.我将它作为属性应用于表行元素.它现在为每个子元素(所有列等)触发,但只有当您将鼠标放在表行上时才应触发它. 这是我的指令的样子： myap

我正在玩AngularJS框架,我偶然发现了一个问题.我做了一个名为’enter’的指令.它触发了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.

你可以试试这个：

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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!