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

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

提前致谢..........

Answer 1

最后我得到了答案

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

 angular.element(event.currentTarget)

Answer 2

如果您试图展示＆＃39; div＆＃39;当你徘徊在＆＃39; li＆＃39;时，你可以使用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; }

如何将ngMouseOver事件仅绑定到Angular JS中不在其子元素上的目标元素？

2 个答案: