JustGoscha JustGoscha - 4 months ago 8x
AngularJS Question

AngularJS: Preventing 'mouseenter' event triggering on child elements

I'm playing right now with the AngularJS framework and I stumbled upon a problem. I made a directive which is called 'enter'. It triggers functions on

. I applied it as an attribute to the table row elements. It is now triggered for every child element (all the columns and etc), but it should be only triggered, when you go with your mouse over the table row.

This is how my directive looks like:

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() {

Here is an example: http://jsfiddle.net/dJGfd/1/

You have to open the Javascript console to see the log messages.

What is the best way to achieve the functionality that I want in AngularJS? I prefer to not use jQuery if there is a reasonable AngularJS solution.


You can try this:

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) {
                // otherwise store new value
                pendingMouseState = newMouseState;
                // and start timeout

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

                // 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) {

            element.bind('mouseleave', function (event) {

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

Same thing at http://jsfiddle.net/22WgG/

Also instead

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


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

you can specify

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

See http://jsfiddle.net/hwnW3/