三种阻止事件执行的方式

  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. 07binlog日志介绍

    设置日志格式为row 创建数据库和表 mysql> create database chinasoft charset=utf8mb4; mysql> use chinasoft; mys ...

  2. Ubantu更新hostname & hosts

    一.概述 Hostname 即主机名,一般存放在 /etc/hostname 中.而hosts则是本地域名解析文件,存放于 /etc/hosts. 二.测试 2.1 hostname musion@m ...

  3. Fiddler之iOS手机抓包实战操作

    准备工作: 1.Fiddler是否安装 2.笔记本的360免费WiFi即可 步骤: 1.官网下载Fiddler并安装 2.打开Fiddler,点击上方Tools,进入Options,选择HTTPS,按 ...

  4. tensorflow从入门到放弃-0

    刚接触tensorflow一周,感觉还是有点难度的.遇到这么个问题 failed call to cuInit: CUDA_ERROR_NO_DEVICE: no CUDA-capable devic ...

  5. Percona 5.7.13 已经发布

    Percona 5.7.13 已经正式发布,需要的人士可以去官方网站下载 https://www.percona.com/downloads/Percona-Server-5.7/Percona-Se ...

  6. vue 统一处理token失效问题

    使用http response 拦截器 在main.js中添加 import axios from 'axios'; axios.interceptors.response.use(response ...

  7. 2018年最新JAVA面试题总结之JavaWeb(2)

    转自于:https://zhuanlan.zhihu.com/p/39522575 1.tomcat的优化方式?回答:Tomcat的优化我准备从三方面来说: 第一部分: 内存优化Tomcat的默认内存 ...

  8. js获取当前时间并实时刷新

    效果如图: 代码如下: <html> <head> <title>js获取当前时间并实时刷新</title> <script> //页面加载 ...

  9. SpringBoot动态配置加载

    1.SpringBoot对配置文件集中化进行管理,方便进行管理,也可以使用HttpClient进行对远程的配置文件进行获取. 创建一个类实现EnvironmentPostProcessor 接口,然后 ...

  10. golang slice 经典例题

      arr := [...],,,,,,,,} s1 :=arr[:] s2 :=arr[:] s1=? //2,3,4,5 s2=? // 5,6 package main import " ...