DOM怎么阻止默认动作?怎么阻止冒泡事件?

简介: 有一些html元素默认的行为,比如说a标签,点击后有跳转动作;form表单中的submit类型的input有一个默认提交跳转事件;reset类型的input有重置表单行为。

怎么阻止默认动作?

有一些html元素默认的行为,比如说a标签,点击后有跳转动作;

form表单中的submit类型的input有一个默认提交跳转事件;reset类型的input有重置表单行为。

如果你想阻止这些浏览器默认行为,JavaScript为你提供了方法。

let $a = document.querySelector("#a")[0];
 $a.onclick = function(e){
     alert("跳转动作被我阻止了")
     e.preventDefault();
     //return false;//也可以
 }

既然return false 和 e.preventDefault()都是一样的效果,那它们有区别吗?当然有。

仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。

阻止冒泡事件:

function stopBubble(e){
  if(e&&e.stopPropagation){//非IE
   e.stopPropagation();
  }
  else{//IE
   window.event.cancelBubble=true;
  }
 }



目录
相关文章
|
4月前
|
XML 消息中间件 JavaScript
从0开始学习JavaScript--JavaScript DOM操作与事件处理
在前端开发中,DOM(文档对象模型)是一个至关重要的概念,它为JavaScript提供了一种与HTML和XML文档交互的方法。本文将深入探讨DOM的概念与作用,以及JavaScript与DOM之间的密切关系。
|
19天前
|
前端开发 JavaScript
CSS中禁用DOM事件
CSS中禁用DOM事件
|
2月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
26 0
|
4月前
|
JavaScript
js_操作dom(委托和冒泡事件)
js_操作dom(委托和冒泡事件)
34 0
|
XML JavaScript 前端开发
|
JavaScript
JS(Dom事件操作)第十九
JS(Dom事件操作)第十九
178 0
|
4月前
|
存储 JavaScript 前端开发
JavaScript:DOM事件
JavaScript:DOM事件
51 0
|
9月前
|
JavaScript 前端开发
原生JavaScript之dom表单改变和鼠标常用事件
那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件.
45 2
|
9月前
|
JavaScript 前端开发
原生JavaScript之dom如何进行事件监听(事件捕获/冒泡)
原生JavaScript之dom如何进行事件监听(事件捕获/冒泡)
127 1
|
10月前
|
JavaScript 前端开发 API
JavaScript事件处理:探索DOM事件和事件监听器
JavaScript事件处理:探索DOM事件和事件监听器
69 0