简单解析JavaScript的默认事件及如何阻止默认事件

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 简单解析JavaScript的默认事件及如何阻止默认事件上篇文章就提到,在JavaScript中提到事件冒泡两个必不可少也要提的就是事件捕获和默认事件,现在来聊一聊什么是默认事件,及如何阻止默认事件。1.什么是默认事件顾名思义,默认事件就是默认执行的事件,比如 a标签,点击a标签,页面会自动跳转。如图:在这里插入图片描述HTML代码: <form action=""> <input type="submit" id="submit"> <input type="image" src="../../CSS/0421/car.jpg"

简单解析JavaScript的默认事件及如何阻止默认事件




上篇文章就提到,在JavaScript中提到事件冒泡两个必不可少也要提的就是事件捕获和默认事件,现在来聊一聊什么是默认事件,及如何阻止默认事件。


1.什么是默认事件20200603022011340.gif


顾名思义,默认事件就是默认执行的事件,比如 a标签,点击a标签,页面会自动跳转。如图:


在这里插入图片描述


HTML代码:



<formaction=""><inputtype="submit"id="submit"><inputtype="image"src="../../CSS/0421/car.jpg"alt=""id="image"></form><ahref="http://www.baidu.com"id="anchor">这是一个锚链接</a>

2.如何阻止默认事件


在这里插入图片描述

20200603022038367.gif

// 默认事件   阻止默认事件
    var oSubmit=document.getElementById("submit");
    var oImg=document.getElementById("image");
    var oAnchor=document.getElementById("anchor");
    oSubmit.onclick=function(ev){
        var ev=ev||window.event;
        if(ev&&ev.preventDefault){//除ie外的浏览器
            ev.preventDefault();
        }else{
            return false;//ie浏览器
        }
    }
    oAnchor.onclick=function(ev){
        var ev=ev||window.event;
        if(ev&&ev.preventDefault){//除ie外的浏览器
            ev.preventDefault();
        }else{
            return false;//ie浏览器
        }
    }

视频讲解链接:
https://www.bilibili.com/video/BV1wZ4y1H7mM/

相关文章
|
27天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
23天前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
97 59
|
29天前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
44 6
|
15天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
32 0
|
1月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
29 0
|
1月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
94 0
|
1月前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
41 0
|
1月前
|
存储 JavaScript 前端开发
Vue.js项目中全面解析定义全局变量的常用方法与技巧
Vue.js项目中全面解析定义全局变量的常用方法与技巧
41 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
96 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
123 4

推荐镜像

更多