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;
  }
 }



目录
相关文章
|
7月前
|
XML 消息中间件 JavaScript
从0开始学习JavaScript--JavaScript DOM操作与事件处理
在前端开发中,DOM(文档对象模型)是一个至关重要的概念,它为JavaScript提供了一种与HTML和XML文档交互的方法。本文将深入探讨DOM的概念与作用,以及JavaScript与DOM之间的密切关系。
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
49 5
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
28 5
|
2月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
29 0
|
3月前
|
前端开发 JavaScript
CSS中禁用DOM事件
CSS中禁用DOM事件
|
5月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
49 0
|
7月前
|
JavaScript
js_操作dom(委托和冒泡事件)
js_操作dom(委托和冒泡事件)
44 0
|
XML JavaScript 前端开发
|
JavaScript
JS(Dom事件操作)第十九
JS(Dom事件操作)第十九
190 0
|
7月前
|
存储 JavaScript 前端开发
JavaScript:DOM事件
JavaScript:DOM事件
58 0