Javascript preventDefault()和stopPropagation()的區別用法及代碼示例

在本文中，我們將討論 PreventDefault 和 stopPropagation 方法，並為每個條件提供合適的代碼示例，然後我們將看到 PreventDefault 與 stopPropagation 之間的區別。

JavaScript preventDefault() 方法：它是事件接口中存在的一個方法。此方法阻止瀏覽器執行所選元素的默認行為。僅當事件可取消時，此方法才能取消該事件。例如，有些事件是無法阻止的，例如滾動和滾輪事件。

用法:

event.preventDefault();

參數：該方法不接受任何參數。

我們將在示例的幫助下了解應用這兩種方法的方法。

示例 1：阻止鏈接跟隨 URL，以便瀏覽器無法轉到另一個頁麵。

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Using jquery library -->
    <script src=
"https://code.jquery.com/jquery-git.js">
    </script>
</head>
<body>
    <a id="first" href="www.geeksforgeeks.com">
        GeeksForGeeks
    </a>
     
    <script>
        $("#first").click(function () {
            event.preventDefault();
            alert("Event prevented, Can't go there.");
        });
    </script>
</body>
</html>

輸出：

示例 2：它阻止用戶選中複選框。通常，當我們單擊複選框時，它會切換，但在調用 preventDefault() 方法後什麽也不起作用。

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Using jquery library -->
    <script src=
"https://code.jquery.com/jquery-git.js">
    </script>
</head>
<body>
    <input type="checkbox" id="f" />
    click on this box
     
    <script>
        $("#f").click(function () {
            event.preventDefault();
            alert("Event prevented");
        });
    </script>
</body>
</html>

輸出：

JavaScript stopPropagation() 事件方法：該方法用於阻止父元素訪問該事件。本質上，此方法用於防止調用同一事件的傳播。例如，我們有一個按鈕a 內的元素分區標簽並且有一個單擊時它們兩個上的事件，然後每當我們嘗試激活附加到按鈕元素，然後附加到的事件分區元素也會被執行，因為div 是按鈕元素的父元素。

syntax:

event.stopPropagation();

我們可以使用stopPropagation()方法來解決這個問題，因為這會阻止父級訪問該事件。

示例 1：

HTML


<!DOCTYPE html>
<html>
<head>
    <!-- jQuery library -->
    <script src=
"https://code.jquery.com/jquery-git.js">
    </script>
</head>
<body>
    <div class="first" onclick="functionFirst()">
        <button onclick="functionSecond()">
            Button
        </button>
    </div>
     
    <script>
        function functionSecond() {
            alert("button hello");
        }
        function functionFirst() {
            alert("div hello");
        }
    </script>
</body>
</html>

輸出：

這裏，點擊按鈕後，兩個函數都會被執行。

示例 2：

HTML


<!DOCTYPE html>
<html>
<head>
    <!-- jQuery library -->
    <script src=
"https://code.jquery.com/jquery-git.js">
    </script>
</head>
<body>
    <div class="first" onclick="functionFirst()">
        <button onclick="functionSecond()">
            Button
        </button>
    </div>
     
    <script>
        function functionSecond() {
            event.stopPropagation();
            alert("button hello");
        }
        function functionFirst() {
            alert("div hello");
        }
    </script>
</body>
</html>

輸出：

現在，在本例中，我們添加了一個 event.stopPropagation() 方法，然後將執行按鈕元素的唯一函數。

preventDefault() 與 stopPropagation() 方法之間的區別：

event.preventDefault() Method	event.stopPropagation() Method
防止瀏覽器對該事件采取默認操作。	防止父元素或子元素進一步傳播當前事件。
它是 Event 接口中存在的一個方法。	該方法也存在於 Event 接口中。
例如，它阻止瀏覽器跟蹤鏈接。	它無法阻止瀏覽器的默認行為。
它的語法是-：事件.preventDefault();	它的語法是-：事件.stopPropagation();
該方法不帶任何參數	該方法在其定義中也不接受任何參數
其支持的瀏覽器有-：chrome、firefox、safari、opera等	其支持的瀏覽器有-：chrome、firefox、safari、opera等
它不返回值	它沒有任何返回類型
它使用 DOM Level 3 Events 的 DOM 版本	它使用 DOM 級別 2 事件的 DOM 版本

相關用法

注：本文由純淨天空篩選整理自hritikrommie大神的英文原創作品 Difference between preventDefault() and stopPropagation() methods in JavaScript。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。