How to bind ngMouseOver event only to target element not on their child element in Angular JS?

Question

HTML code:

    <ul>
        <li ng-repeat="folder in folders" ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">
                <div class="folder-menu-hide">
                    menu goes here
                    </div> <a href="" target="_blank">
                           <img ng-src="{{folderImage}}" /> 
                            <span style="display: -moz-inline-grid; width: 100%; text-align: center;color:black;">{{folder.name}}</span>
                            </a>
        </li>
  </ul>

JS:

   $scope.hoverIn=function(object){
    //alert("MouseEnter");
    console.log("hi");
    console.log(object);
    $obj=$(object.target);
    $obj.children('div').removeClass('folder-menu-hide');
    $obj.children('div').addClass('folder-menu-visible');
    console.log($obj);
    console.log($obj.children('div'));
    //$scope.hoverEdit=false;
};
$scope.hoverOut=function(object){
    $obj=$(object.target);
    $obj.children('div').removeClass('folder-menu-visible');
    $obj.children('div').addClass('folder-menu-hide');
    //$scope.hoverEdit=true;
};

when i hover a mouse on li element, it return child of li element as target element sometimes. It looks like it triggers event for child element also. How can i avoid triggering event to child element and the event has to apply only on li element.

Thanks in advance..........

Answer 1

Finally i got an answer

event.currentTarget Identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.

 angular.element(event.currentTarget)