JavaScript中的stopPropagation方法有什么用-js教程-PHP中文网

首页

web前端

js教程

JavaScript中的stopPropagation方法有什么用

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 pm 05:05 PM

JavaScript中的stopPropagation方法有什么用

本文将介绍 stopPropagation() 方法以及有用的代码示例。之后，我们将了解 stopPropagation() 和 PreventDefault() 方法之间的区别。

stopPropagation() 事件方法 - 父元素无法使用此方法访问事件方法。一般来说，创建此函数是为了防止多次调用同一事件传播。例如，如果一个按钮元素包含在 div 标签内，并且它们都有一个 onclick 事件，每当我们尝试激活与按钮元素关联的事件时，与 div 元素关联的事件也会被激活，因为该 div 元素确实是按钮元素。

语法

event.stopPropagation();

stopPropagation() 方法将阻止父级访问事件，可用于解决这个问题。

示例 1

<!DOCTYPE html>
<html>
<title>What is the use of stopPropagation method in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      div {
         padding: 50px;
         background-color: rgba(10, 111, 134, 0.2);
         text-align: center;
         cursor: pointer;
      }
   </style>
   <!-- jQuery library -->
   <script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
   <h1 id="Let-us-understand-the-stopPropagation-Method">Let us understand the stopPropagation() Method</h1>
   <p>Test the results by clicking the DIV(1) & DIV(2) as shown below in the color boxes:</p>
   <div onclick="myFunction2()">This is my Second DIV(2)
      <div onclick="myFunction1(event)">This is my First DIV(1)</div>
   </div>
   Check to stop propagation event:
   <input type="checkbox" id="check">
   <p></p>
   <p>Because my First DIV(1) is inside Second DIV(2), both DIVs get clicked when you click on First DIV(1).
   </p>
   <p>You can test it by check and uncheck the stop propagation checkbox, to get the outcome.</p>
   <p>You can stop the current event from propagating by using the stopPropagation() method.</p>
   <script>
      function myFunction1(event) {
         alert("My First DIV(1)");
         if (document.getElementById("check").checked) {
            event.stopPropagation();
         }
      }
      function myFunction2() {
         alert("My Second DIV(2)");
      }
   </script>
</body>
</html>

单击外部 div“my Second DIV(2)”后，确认框仅显示一次，如下所示。

此外，如果单击内部 div“my First DIV(1)”，确认框将显示两次，如下所示。

接下来，单击“确定”按钮后，将显示外部 div“我的第二个 DIV(2)”确认框。

只要选中一个复选框并单击内部 div“my First DIV(1)”，如截图如下。确认框仅出现一次。

示例 2

在这个例子中，让我们了解 event.stopPropagation() 方法是如何实现的，这将导致执行按钮元素的单个函数。

<!DOCTYPE html>
<html>
<title>What is the use of stopPropagation method in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <style>
      div {
         padding: 50px;
         background-color: rgba(63, 65, 45, 0.2);
         text-align: center;
      }
   </style>
   
   <!-- jQuery library -->
   <script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
   <h3>The button element's single function will be executed with stopPropagation() Method
   </h3>
   <p>Test the result by clicking the button as shown below in the color boxe:</p>
   <div class="first" onclick="functionFirst()">
      <button type="button" class="btn btn-success btn-lg" onclick="functionSecond()">
         Button
      </button>
   </div>
   <p></p>
   <script>
      function functionSecond() {
         event.stopPropagation();
         alert("This is my First DIV(1)");
      }

      function functionFirst() {
         alert("This is my Second DIV(2)");
      }
   </script>
</body>
</html>

preventDefault() 方法 - 这是在事件接口中找到的方法。通过使用这种方法，阻止浏览器执行所选元素的默认操作。仅当如果该技术能够做到这一点，则事件是可取消的。例如，滚动和滚轮事件是一些无法避免的事件的例子。

语法

preventDefault() Method

示例 3

让我们了解如何阻止链接跟随此示例中的 URL，以便浏览器无法访问访问另一个页面。

<!DOCTYPE html>
<html>
<title>What is the use of stopPropagation method in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Using jquery library -->
   <script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
   <a id="myLink" href="www.tutorialspoint.com">
      Welcome to Tutorialspoint!
   </a>
   <script>
      $("#myLink").click(function() {
         event.preventDefault();
         alert("This event is prevented, you can't visit the URL.");
      });
   </script>
</body>
</html>

单击该链接，您将看到确认框，显示“此事件已被阻止，您无法访问该 URL。”

以上是JavaScript中的stopPropagation方法有什么用的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。