【JavaScript】阻止事件默认行为

默认行为

在JavaScript中,事件默认行为是指在特定的事件发生时浏览器自动执行的操作。例如,当用户单击一个链接时,浏览器会自动跳转到链接的URL页面;form 元素 的 action 属性值表单内容要提交的地址,而用户点击表单元素中嵌套的提交按钮时,就会有一个默认的提交操作。

而有时候,不需要这些默认行为。比如,我们提交表单希望ajax 异步发送到服务器,不需要form 的默认事件提交跳转行为。

一句话说就是 html 元素自带的行为。

阻止默认行为

1. 使用event.preventDefault()方法:

这是阻止事件默认行为最常用的方法之一。当事件被触发时,可以调用event.preventDefault()方法来阻止浏览器执行其默认行为。例如,在单击链接时,可以通过以下方式阻止浏览器跳转到链接的URL页面:

javascript 复制代码
document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
});

2. 使用return false

在某些情况下,可以在事件处理程序中使用return false来阻止事件默认行为。这种方式通常用于内联事件处理程序,例如onclick属性。例如,以下代码将阻止单击链接时的默认行为:

注意:如果写在 jQuery 中,能够同时阻止默认行为和阻止冒泡。

html 复制代码
<a href="#" onclick="return false;">点击我不会跳转</a>

3. 使用event.returnValue属性:

在旧版本的IE浏览器中,可以使用event.returnValue属性来阻止事件默认行为(现在很多浏览器也支持)。将event.returnValue设置为false可以阻止默认行为的执行。例如:

javascript 复制代码
document.querySelector('a').attachEvent('onclick', function(event) {
  event.returnValue = false;
});

4. 使用event.stopPropagation()方法(仅阻止事件传播):

阻止事件传播。 event.stopPropagation()方法用于阻止事件的进一步传播,而不是直接阻止事件的默认行为。它可以用于停止事件冒泡到父元素或其他事件监听器。例如:

javascript 复制代码
document.querySelector('.child').addEventListener('click', function(event) {
  event.stopPropagation();
});

5. 使用 cancelable 属性

查看状态。 该属性表示事件是否可以取消,返回一个布尔值。该属性是只读属性。true 表示可以取消。

html 复制代码
<a id="test" href="https://www.baidu.com">百度</a>
<script>
    let test = document.getElementById('test');
    test.onclick = function (e) {
        // 可以取消事件的默认行为
        console.log(e.cancelable)
    }
</script>

6. defaultPrevented 方法

查看状态。 也是 event的一个属性,表示默认行为是否被阻止,true 表示被阻止。

html 复制代码
<a id="test" href="https://www.baidu.com">百度</a>
<script>
    let test = document.getElementById('test');
    test.onclick = function (e) {
        e.preventDefault()
        console.log(e.defaultPrevented)  // true
    }
</script>

需要注意的是,不同的事件有不同的默认行为,因此阻止默认行为的方法可能会有所不同。一些常见的事件默认行为包括表单提交、链接点击、表单元素的键盘输入等。

总结起来,使用event.preventDefault()方法是最常见和推荐的阻止事件默认行为的方法。其他方法如return falseevent.returnValue属性在特定情况下可能有用,但不如event.preventDefault()方法灵活和通用。另外,event.stopPropagation()方法用于阻止事件传播,而不是直接阻止事件的默认行为。

相关推荐
青红光硫化黑10 分钟前
React基础之React.memo
前端·javascript·react.js
大麦大麦14 分钟前
深入剖析 Sass:从基础到进阶的 CSS 预处理器应用指南
开发语言·前端·css·面试·rust·uni-app·sass
m0_616188492 小时前
Vue3 中 Computed 用法
前端·javascript·vue.js
六个点2 小时前
图片懒加载与预加载的实现
前端·javascript·面试
Patrick_Wilson2 小时前
🔥【全网首篇】30分钟带你从0到1搭建基于Lynx的跨端开发环境
前端·react.js·前端框架
Moment2 小时前
前端 社招 面筋分享:前端两年都问些啥 ❓️❓️❓️
前端·javascript·面试
Moment2 小时前
一坤时学习 TS 中的装饰器,让你写 NestJS 不再手软 😏😏😏
前端·javascript·面试
子洋2 小时前
AnythingLLM + SearXNG 实现私有搜索引擎代理
前端·人工智能·后端
小满zs3 小时前
React第二十九章(css in js)
前端·react.js
古柳_Deserts_X3 小时前
Manus官方发布视频的1小时后就开始陆续有人注册了相关网站域名!原因就在于「新词新站」这4个字
前端·程序员·创业