How to bind ngMouseOver event only for target element not on child element in Angular JS?
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 over the li element, it sometimes returns the child of the li as the target element. It looks like it also raises an event for the child. How can I avoid firing the child element event and the event should only apply to the li element.
Thanks in advance..........
+3
source to share
2 answers
Finally I got the answer
event.currentTarget Identifies the current target for the event as the event traverses the DOM. It always refers to the element to which the event handler is attached, not to event.target, which identifies the element on which the event occurred.
angular.element(event.currentTarget)
+8
source to share
If you were trying to show the "div" when hovering over the "li" you could use CSS.
<ul>
<li class="folder" ng-repeat="folder in folders">
<div class='menu'>
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>
CSS
.menu { display: none; }
.folder:hover .menu { display: block; }
0
source to share