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();
});

以上是JS阻止默認行為的方法詳解。無論是什麼方式，都要根據具體的需求去選擇。在實際開發中，可以根據我們的場景，選擇最適合我們的方法來阻止事件的默認行為。