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

一、阻止默认事件的方法

在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()方法则阻止了事件的冒泡行为。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/246398.html