Angularjs 如何将ngMouseOver事件仅绑定到目标元素，而不绑定到Angular JS中的子元素？

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>

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

---

提前谢谢………

最后我得到了答案

event.currentTarget在事件遍历DOM时标识事件的当前目标。它总是指事件处理程序已附加到的元素，而不是event.target，后者标识事件发生的元素

 angular.element(event.currentTarget)

---

如果将鼠标悬停在“li”上时试图显示“div”，则可以使用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>

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

.menu { display: none; }
.folder:hover .menu { display: block; }