三种阻止事件执行的方式

  1. event.preventDefault()
  2. event.stopPropagation()
  3. return false
  • event.preventDefault() 阻止特定事件的默认行为(只有 cancelable 设置为 true 的事件才可以使用),比如:点击 type="submit" 的 input 标签提交表单,你在 onclick 事件处理中调用 event.preventDefault()方法, 那么在点击 submit 后就不会自动提交表单了。但是并不阻止事件冒泡。
  • event.stopPropagation() 立即停止事件在 DOM 层次中的传播,即阻止事件冒泡。但是,并不阻止默认行为。
  • return false 之后的所有相关的触发事件和动作都不会被执行。阻止事件继续传播,事件冒泡和默认行为都被阻止。

作者:杜思云
链接:https://www.zhihu.com/question/19867421/answer/230336827
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

js 阻止事件执行的更多相关文章

  1. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

  2. 使用CEfSharp之旅(2) js前台事件执行后台方法

    原文:使用CEfSharp之旅(2) js前台事件执行后台方法 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群191065815 我的群里问 https://blo ...

  3. js阻止事件冒泡的两种方法

    1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...

  4. JS阻止事件冒泡

    在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> < ...

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

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

  6. js 阻止事件冒泡 支持所有主流浏览器

    function getEvent(){ if(window.event) {return window.event;} func=getEvent.caller; while(func!=null) ...

  7. js阻止事件冒泡和标签默认行为

    ////阻止事件冒泡函数和 // 阻止默认浏览器动作(W3C) 要一起使用效果好<a href="/Scripts/newfiber_js_lib/images/1.jpg" ...

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

    e.stopPropagation(); //阻止事件冒泡 功能:停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e &am ...

  9. js 阻止事件

    event.stopPropagation();//阻止事件冒泡 ,可阻止父类事件的发生 event.preventDefault();//阻止默认行为 如A标签

随机推荐

  1. VMware虚拟机配置内网电脑能访问

    关键字:内网访问虚拟机.内网访问Linux虚拟机.虚拟机访问外部网络 1.vmware虚拟机网络设置为桥接模式 2.虚拟机配置iP地址,以linux系统为示例. 勾选自动连接,选择手动配置ip,然后配 ...

  2. struts 学习03

    jdk下载: 使用注解: @ParenPackage(value="struts-default") @Namespace(value="/) @Action(value ...

  3. JAVA 数组作为方法返回值—返回地址

    package Code411;/*一个方法可以有0,1,多个 参数,但只能有0和1个返回值希望一个方法产生多个结果数据进行返回 数组作为方法的参数,传递进去的是数组的地址值. */public cl ...

  4. JQuery ajax 前后端传值介绍

    https://jingyan.baidu.com/album/ca41422f0bf08e1eae99ed04.html?picindex=5 现在我们话不多说,开始仔细讲解一下我们ajax内部传递 ...

  5. 算法工程师<深度学习基础>

    <深度学习基础> 卷积神经网络,循环神经网络,LSTM与GRU,梯度消失与梯度爆炸,激活函数,防止过拟合的方法,dropout,batch normalization,各类经典的网络结构, ...

  6. 《剑指offer》二叉树的深度

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  7. Flask简介&入门

    1 了解框架 Flask作为Web框架,它的作用主要是为了开发Web应用程序.那么我们首先来了解下Web应用程序.Web应用程序 (World Wide Web)诞生最初的目的,是为了利用互联网交流工 ...

  8. el-table中单数行与双数行设置不同的背景颜色

    <el-table :cell-style='cellStyle' :data="tableData" style="width: 100%;" > ...

  9. QT安装后再添加或删除组件

    QT安装目录下打开MaintenanerceTool.exe 手动添加​储存库,要定位一个储存有QT在线安装镜像的网址: https://download.qt.io/online/qtsdkrepo ...

  10. Vue 2.6 中部分引入 TypeScript 的方法

    在 Vue 与 Cesium 联合开发的过程中,我发现很多 Cesium 代码不宜直接写在 .vue 文件中.同时由于 Cesium 库较为复杂,不借助 TypeScript 的静态类型会导致代码难维 ...