最新公告
  • 欢迎您光临码农资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!加入我们
  • JavaScript中的stopPropagation方法有什么用

    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>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。”

    想要了解更多内容,请持续关注码农资源网,一起探索发现编程世界的无限可能!
    本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
    如有侵权请发送邮件至1943759704@qq.com删除

    码农资源网 » JavaScript中的stopPropagation方法有什么用
    • 7会员总数(位)
    • 25846资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 292稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情