AngularJS 中常用鼠标操作

AngularJS 中 常用鼠标的操作 （ng-mouseenter 等操作）

主要用于网站开发， 鼠标所出发的事件， 本文主要介绍两个ng-mouseenter 与 ng-mouseleave 操作， 其他事件操作类似

• 1.ng-mouseover (告诉 AngularJS 鼠标移动到指定的 HTML 元素上时要执行的操作)
• 2.ng-mousemove(鼠标指针在元素上移动时执行表达式)
• 3.ng-mouseenter(鼠标穿过所要执行表达式)
• 4.ng-mousedown(鼠标按下时执行表达式)
• 5.ng-mouseleave(鼠标离开时执行表达式)

---

ng-mouseenter 与 ng-mouseleave 一起使用来介绍

1 与ng-show 结合使用

代码块（只存在html中）

<div class="col-md-12"  style="padding: 0px; text-align: center"ng-mouseenter = "selShow = true; selNoShow = false;" ng-mouseleave = "selShow = false;selNoShow = true;"><div class = "col-md-12" style = "padding:0px;"ng-show = "selShow">我是好人</div><div class = "col-md-12" style = "padding:0px;"ng-show = "selNoShow">不， 你是坏人</div></div>注释：需要再JS文件中设定默认的一个ng-show 为真： 例如：$scope.selShow = false;$scope.selNoShow = true;效果为  先实现不， 你是坏人， 当鼠标进入显示我是好人， 离开显示不， 我是坏人

1 ng-mouseenter 与 ng-mouseleave 触发时间使用

html：

<div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis" ng-mouseenter = "itemClick($index,item.retail_price,item.product_cat_pic)">                                                            </div>

js中执行操作：

$scope.itemClick = function(index,price, url){       alert（"括号中代表传递操作"）;    }

注释

本文主要讲解两个事件方法的使用， 是菜鸟教程中没有涉及到的使用， 希望对大家有所帮助， 想要学更多基础AngularJS 开发技术可见菜鸟教程或者AngularJS官网API