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