zoukankan      html  css  js  c++  java
  • angular 禁止事件冒泡 和 默认行为

    事件冒泡和事件捕捉一直以来都是被讨论的话题,也许大家平时在工作中没有遇到过需要解决事件冒泡的情况
    举个例子:

    <body ng-click="fun1()">
      <div ng-click="fun2()">
         <img  ng-click="fun3()" src="xxx.png"/>
      </div>
    </body>

    从以上的代码中的fun1(),fun2()和fun3()我们可以看出,当我们点击了<img/>标签中的ng-click事件,触发fun3()方法,
    但是根据文档对象模型的特征,我们虽然只想触发fun3()方法,事件一直向上一层进行冒泡,fun2()和fun1()也会随后执行
    此时,为了达到只执行fun3()方法的效果,我们要要在fun3()中写入组织事件冒泡的代码

    在这里着重讲一下AngularJS中是如何实现阻止事件冒泡的
    当我们在一个标签上使用了controller中写好的方法时

    <div fun1($event)></div>

    angularJS中的执行方法会自带一个$event,这个$event是当前事件的对象,我们直接对这个事件对象进行操作就可以达到阻止事件冒泡的效果

    $scope.fun1=function($event){
      $event.stopPropagation();   //stopPropagation是目前最常用也是最标准的解决事件冒泡的方法
      //你自己的代码
    };

    这样我们就可以实现,只实行fun1(),不会执行其外层DOM元素上绑定的事件。

    同理,阻止默认行为:$event.preventDefault();  

    $scope.fun1=function($event){
      $event.preventDefault();    //preventDefault 阻止默认行为
      //你自己的代码
    };

    .

  • 相关阅读:
    sublime中node测试环境
    常用的win dos命令
    html area图片热点
    Git常用指令整理(Git Cheat Sheet)
    Java研发技术学习路线
    编程+工具基础教程|网站整理
    廖雪峰 Git 教程 + Git-Cheat-Sheet 学习总结
    现成的HTML5框架
    记录下自己学习的点滴-开始写博客
    linux查看日志文件
  • 原文地址:https://www.cnblogs.com/crazycode2/p/6759633.html
Copyright © 2011-2022 走看看