angularjs - 如何将 ngMouseOver 事件仅绑定(bind)到目标元素而不是 Angular JS 中的子元素？

Question

HTML 代码:

    <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;
};

当我将鼠标悬停在 li 元素上时，它有时会返回 li 元素的子元素作为目标元素。看起来它也触发了子元素的事件。我怎样才能避免触发事件到子元素并且事件必须只应用于 li 元素。

提前致谢…………

Answer 1

终于有答案了

event.currentTarget 标识事件的当前目标，因为事件遍历 DOM。它始终引用事件处理程序已附加到的元素，而不是 event.target 标识发生事件的元素。

 angular.element(event.currentTarget)