JS阻止默认事件的方法详解

发布时间：2023-05-16

阻止默认事件的方法

在JavaScript中，可以通过阻止默认事件来达到自定义页面行为的目的。以下是阻止默认事件的方法：

  1. 使用preventDefault()方法阻止浏览器默认事件。
  2. 使用returnValue属性设置阻止默认事件的返回值。
// 使用preventDefault()方法
document.querySelector('a').addEventListener('click', function(event){
    event.preventDefault();
});
// 使用returnValue属性
document.querySelector('a').attachEvent('onclick', function(event){
    event.returnValue = false;
});

使用preventDefault()方法是比较常见的方法，它会在事件触发时立即被调用，并阻止浏览器默认事件的发生。而使用returnValue属性则是在事件处理完之后再进行阻止操作，更适用于IE等旧版本浏览器。

JS阻止默认事件的默认操作方法

默认情况下，在前端页面中，浏览器会对不同的元素执行不同的默认事件操作。在JavaScript中，我们可以使用以下方法来阻止默认事件的默认操作：

  1. 使用stopPropagation()方法阻止事件向上传递。
  2. 使用preventDefault()方法阻止默认事件。
// 使用stopPropagation()方法
document.querySelector('#container').addEventListener('click', function(event){
    event.stopPropagation();
});
// 使用preventDefault()方法
document.querySelector('form').addEventListener('submit', function(event){
    event.preventDefault();
});

以上代码中，使用stopPropagation()方法可以防止事件冒泡，从而阻止了其默认操作。而使用preventDefault()方法则可以在表单提交时阻止默认的刷新页面操作。

JS阻止默认行为的方法

阻止默认行为和阻止默认操作是非常相似的，但有时候可以更精细地控制事件。我们可以使用以下方法阻止默认行为的发生：

  1. 使用preventScroll()方法阻止页面滚动。
  2. 使用preventSelection()方法阻止文本被选中。
// 使用preventScroll()方法
document.querySelector('#container').addEventListener('touchmove', function(event){
    event.preventScroll();
});
// 使用preventSelection()方法
document.querySelector('p').addEventListener('selectstart', function(event){
    event.preventSelection();
});

以上代码中，preventScroll()方法能够阻止页面的滚动，而preventSelection()方法则可以防止页面文本被选中。

JS阻止冒泡和默认事件

在有些情况下，我们可能需要阻止事件同时阻止它们的冒泡行为。我们可以使用以下方法：

  1. 使用preventDefault()方法阻止默认事件。
  2. 使用stopPropagation()方法阻止事件冒泡。
// 阻止冒泡和默认事件
document.querySelector('a').addEventListener('click', function(event){
    event.preventDefault();
    event.stopPropagation();
});

以上代码中，使用preventDefault()方法阻止默认事件，并使用stopPropagation()方法阻止事件冒泡。

JS阻止浏览器默认事件

有些事件会经过浏览器处理后执行相应的默认操作，比如点击链接会跳转到指定的页面。我们可以使用以下方法阻止浏览器默认事件：

  1. 使用addEventListener()方法绑定事件。
  2. 使用preventDefault()方法阻止浏览器默认事件。
// 阻止浏览器默认事件
document.querySelector('a').addEventListener('click', function(event){
    event.preventDefault();
});

以上代码中，使用addEventListener()方法绑定了点击事件，并在事件触发时使用preventDefault()方法来阻止浏览器默认事件。

原生JS阻止默认事件

在JavaScript中，我们可以使用原生方法来阻止默认事件的发生，例如：

  1. 使用return false阻止默认事件。
  2. 使用事件对象阻止默认事件发生。
<!-- 使用return false -->
<a href="#" onclick="return false">点击我</a>
<!-- 使用事件对象 -->
<a href="#" onclick="event.preventDefault()">点击我</a>

以上代码中，使用return false可以阻止默认事件的发生，而事件对象也可以在事件触发时使用preventDefault()方法阻止默认事件的触发。

阻止事件的默认行为的方法

在JavaScript中，我们可以使用以下方法来阻止事件的默认行为：

  1. 使用event.preventDefault()方法阻止事件默认行为。
  2. 使用event.stopPropagation()方法阻止事件的冒泡行为。
// 阻止事件的默认行为
document.querySelector('form').addEventListener('submit', function(event){
    event.preventDefault();
});
// 阻止事件冒泡
document.querySelector('#container').addEventListener('click', function(event){
    event.stopPropagation();
});

以上代码中，使用event.preventDefault()方法阻止了表单提交时的默认行为，而使用event.stopPropagation()方法则阻止了事件的冒泡行为。

推荐文章