JavaScript阻止事件默认行为的不同方法
作者:前端小巷子
一、什么是默认行为?
默认行为是指HTML元素自带的行为。例如,点击一个<a>
元素通常会导致页面跳转,提交一个<form>
元素会导致页面刷新。这些行为在某些情况下可能不是我们想要的,因此需要阻止它们。
二、阻止默认行为的方法
(一)preventDefault方法
preventDefault
方法是DOM中最常见且标准的阻止默认行为的方式。它可以直接调用,无需返回值。
<a id="test" href="https://www.baidu.com">百度</a> <script> var test = document.getElementById("test"); test.onclick = function(event) { event.preventDefault(); }; </script>
在上面的代码中,点击链接时不会跳转到百度,因为preventDefault
方法阻止了链接的默认跳转行为。
(二)returnValue属性
returnValue
属性是event
对象上的一个可读写属性,默认值为true
。将其设置为false
可以取消事件的默认行为。这种方法最早在IE中实现,但现在大多数浏览器都支持。
var test = document.getElementById("test"); test.onclick = function(event) { event.returnValue = false; };
(三)return false
在事件处理函数中返回false
也可以阻止默认行为。这种方法在原生JavaScript中只能阻止默认行为,但在jQuery中可以同时阻止默认行为和事件冒泡。
var test = document.getElementById("test"); test.onclick = function() { return false; };
(四)defaultPrevented属性
defaultPrevented
属性用于检查默认行为是否已被阻止。它返回一个布尔值,true
表示默认行为已被阻止,false
表示未被阻止。
var test = document.getElementById("test"); test.onclick = function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } test.innerHTML = event.defaultPrevented; };
在上面的代码中,点击链接时会阻止默认行为,并将defaultPrevented
的值显示在页面上。
(五)cancelable 属性
首先要介绍的是 cancelable 属性,该属性返回一个布尔值,表示事件是否可以取消。
该属性为只读属性。返回 true 时,表示可以取消。否则,表示不可取消。
<a id="test" href="https://www.baidu.com">百度</a>
var test = document.getElementById("test"); test.onclick = function (event) { test.innerHTML = event.cancelable; // true }
在上面的代码中,我们为 a 元素绑定了一个点击事件,点击之后通过 event 对象的 cancelable 属性来查看该元素的默认行为是否能阻止。
三、总结
在实际开发中,建议优先使用preventDefault
,因为它是最标准和兼容性最好的方法。希望本文能帮助你更好地理解和应用这些方法。
以上就是JavaScript阻止事件默认行为的不同方法的详细内容,更多关于JavaScript阻止事件默认行为的资料请关注脚本之家其它相关文章!