JavaScript中阻止事件默认行为

在JavaScript中，阻止事件的默认行为是一个常见的需求。本文将详细介绍如何在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，因为它是最标准和兼容性最好的方法。希望本文能帮助你更好地理解和应用这些方法。