JS阻止默认行为的方法详解

一、JS阻止默认行为的方法

在我们使用JavaScript处理事件时，有些情况下需要阻止事件的默认行为，以避免一些不必要的操作或导致页面产生不良的影响。下面介绍几种常见的JS阻止默认行为的方法：

1. 返回false

<button onclick="return false;">Click Me</button>

可以通过在事件处理函数中使用return false来阻止事件的默认行为，比如阻止鼠标点击按钮时提交表单的默认操作。

2. preventDefault()方法

var link = document.querySelector("#mylink");
link.addEventListener("click", function(event) {
  event.preventDefault();
});

preventDefault()是Event对象的方法，可以在事件触发时调用，取消事件的默认行为。比如阻止超链接触发页面跳转或按钮提交表单的默认行为。

3. stopPropagation()方法

var link = document.querySelector("#mylink");
link.addEventListener("click", function(event) {
  event.stopPropagation();
});

stopPropagation()也是Event对象的方法，可以在事件触发时调用，阻止事件冒泡。通常情况下，当一个元素上发生了某个事件并且它具有父元素，此事件会一直冒泡上去并触发父元素上的同类型事件，stopPropagation() 阻止了事件冒泡，防止事件继续向上冒泡。

二、JS如何阻止事件的默认行为

事件的默认行为是针对特定的事件类型，在特定的情况下执行的默认操作，比如：鼠标点击按钮时，按钮默认的操作是提交表单；鼠标点击链接时，链接默认的操作是跳转到指定的网页。通过 preventDefault() 方法可以阻止事件的默认行为。下面是一个例子：

<a href="http://www.example.com" id="mylink">链接</a>
<script>
  document.querySelector("#mylink").addEventListener("click", function(event) {
    event.preventDefault();
  });
</script>

三、JS阻止默认行为有什么用

JS阻止默认行为的主要目的是为了消除因为事件的默认行为而导致的副作用。以下是使用JS阻止默认行为的几个常见用例：

1. 阻止表单提交

在页面中有表单时，输入完表单内容后通过点击提交按钮完成数据的提交，但如果没有输入任何内容，那么默认情况下点击提交按钮会导致整个页面重新加载，这就需要使用JS阻止默认行为。

<form>
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>
<script>
  document.querySelector("form").addEventListener("submit", function(event) {
    // 阻止表单提交
    event.preventDefault();
  });
</script>

2. 阻止超链接的默认行为

在页面中超链接是一个非常常见的元素，但有时候我们并不想让点击超链接时跳转到其他页面，而是在原页面中完成动态展示，这时候就需要使用JS阻止默认行为。

<a href="http://www.example.com" id="mylink">链接</a>
<script>
  document.querySelector("#mylink").addEventListener("click", function(event) {
    // 阻止超链接的默认行为
    event.preventDefault();
  });
</script>

3. 阻止input元素的默认行为

在某些情况下，我们并不想让表单元素获得焦点或者触发默认事件，比如输入框保持禁用状态，这时候就需要使用JS阻止默认行为。

<input type="text" name="phone" id="phone" disabled>
<script>
  document.querySelector("#phone").addEventListener("click", function(event) {
    // 阻止input元素的默认行为
    event.preventDefault();
  });
</script>

四、JS如何阻止默认事件

在JavaScript中，Events可以被阻止（取消）,也可以被监听事件并通知Registration Object

<a href="http://www.example.com" id="mylink">跳转</a>
<script>
  document.querySelector("#mylink").addEventListener("click", function(event) {
    event.preventDefault();
    console.log("事件已被阻止！");
  });
</script>

五、JS阻止浏览器默认事件

在部分情况下，当我们开发页面时，需要清除浏览器默认事件。比如鼠标按下去的那一刹那，用户选择了一些文本，或者用户滚动页面等等。使用JS阻止浏览器默认事件，可以改变默认的用户行为。

<div onclick="alert('hello world!')" onmousedown="return false;">点击并阻止默认事件</div>

六、JS阻止冒泡和默认事件

在实际开发中，一个元素经常会有包含几个子元素的情况，比如一个按钮包含一个图标和文字。当我们阻止事件冒泡时，也可能阻止了这个按钮的默认行为，因为默认行为往往是同一元素的事件触发。下面展示清除事件冒泡，同时阻止默认事件的代码示例：

<button id="mybtn">
  <i class="icon"></i>
  <span>按钮</span>
</button>
<script>
var mybtn = document.querySelector("#mybtn");
mybtn.addEventListener("click", function(event) {
  // 阻止事件冒泡并取消默认行为
  event.stopPropagation();
  event.preventDefault();
  console.log("事件已被阻止！");
});
</script>

七、阻止默认事件的方法JS

在JavaScript中，有很多方式可以阻止默认事件，我们可以选择最适合我们的一种，下面是常用的方法：

1. 返回false

<a href="http://www.example.com" id="mylink" onclick="return false;">链接</a>

2. preventDefault()方法

var link = document.querySelector("#mylink");
link.addEventListener("click", function(event) {
  event.preventDefault();
});

3. stopPropagation()方法

var link = document.querySelector("#mylink");
link.addEventListener("click", function(event) {
  event.stopPropagation();
});

八、JS阻止默认行为的事件参数有哪些

在JS阻止默认事件时，我们需要使用Event对象的方法来阻止事件的默认行为，并且可以使用其参数来控制阻止什么样的事件。以下是Event对象的方法和参数列表：

1. preventDefault()方法

调用该方法可以取消事件的默认行为：

event.preventDefault()

2. stopPropagation()方法

调用该方法可以停止事件冒泡，防止事件的继续向上级元素传递：

event.stopPropagation()

九、JS阻止浏览器默认行为

在JS中，常用的阻止浏览器默认行为的方式有两种，一是添加return false，另一种则是使用preventDefault()方法，以下为具体代码示例：

1. 添加return false

<a href="http://www.example.com" onclick="return false;">链接</a>

2. 使用preventDefault()方法

var link = document.querySelector("#mylink");
link.addEventListener("click", function(event) {
  event.preventDefault();
});