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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。