在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生。
  一、event.stopPropagation()
  阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时候,如果点击一个连接,这个连接仍然会被打开。
  二、event.preventDefault()
  阻止默认事件的方法,调用此方法时,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;
  三、return false;
  这个方法比较暴力,会同时阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return
 false就等于同时调用了event.stopPropagation()和event.preventDefault()。

JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别的更多相关文章

  1. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

  2. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

  3. vue阻止事件冒泡和默认事件

    本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...

  4. 原生js中stopPropagation,preventDefault,return false的区别

    1.stopPropagation:阻止事件的冒泡,但不阻止事件的默认行为. 最好莫过于用例子说明: <div id='div'  onclick='alert("div") ...

  5. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  6. js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

    preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...

  7. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  8. js阻止冒泡和默认事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

随机推荐

  1. Shiro笔记(一)Shiro整体介绍

    介绍:是一个java的安全(权限)框架 可以完成的功能:认证登录(Authentication).授权(Authorization).加密(cryptography).会话管理(session man ...

  2. 20165220 2017-2018-2《Java程序设计》课程总结

    每周作业链接汇总: 20165220 我期望的师生关系 20165220 学习基础和C语言基础调查 20165220 Linux安装及学习 20165220 第一周学习总结 20165220 第二周学 ...

  3. python和yum同时卸载后的安装方法

    centos 7如果卸载了yum和python之后恢复的办法(该方法已经测试). 1. 安装python. python-libs-2.7.5-34.el7.x86_64.rpm python-2.7 ...

  4. Hessian的使用以及理解

    官网 http://hessian.caucho.com/ Hessian的使用以及理解Hessian版本:3.1.5将包括如下的内容: Hessian的基本使用Hessian的原理Hessian和S ...

  5. SpringBoot的国际化使用

    在项目中,很多时候需要国际化的支持,这篇文章要介绍一下springboot项目中国际化的使用. 在这个项目中前端页面使用的thymeleaf,另外加入了nekohtml去掉html严格校验,如果不了解 ...

  6. SQL——用FOR XML Path完成字符串的聚合

  7. BZOJ.4821.[SDOI2017]相关分析(线段树)

    BZOJ LOJ 洛谷 恶心的拆式子..然后就是要维护\(\sum x_i,\ \sum y_i,\ \sum x_iy_i,\ \sum x_i^2\). 操作三可以看成初始化一遍,然后同操作二. ...

  8. React Native小白入门学习路径——三

    迷茫,真的迷茫. 或许是自己努力的还不够吧,在学习的过程中遇到了很多问题,自己尝试借助搜索引擎解决问题,无奈国内的教程写的还很基础,涉及到稍微具体一点的问题时讲解就比较少更新也比较慢,绝大多数还是很早 ...

  9. 设置 IntelliJ IDEA 智能提醒时忽略大小写

    1.Ctrl + Alt + S 打开设置界面(或者从菜单File - settings 进来) 2.在搜索框输入Completion定位到Code Completion功能项 3.在右侧配置界面选中 ...

  10. python流程控制之if、 while和for 循环

    1.if 语句 语法1 if 条件:# 代码1# ... # cls='human'# sex='female'# age=18## if cls == 'human' and sex == 'fem ...