cari

Rumah  >  Artikel  >  hujung hadapan web  >  Apakah kegunaan kaedah stopPropagation dalam JavaScript

Apakah kegunaan kaedah stopPropagation dalam JavaScript

WBOY
WBOYke hadapan
2023-08-24 17:05:06696semak imbas

Apakah kegunaan kaedah stopPropagation dalam JavaScript

Artikel ini akan memperkenalkan kaedah stopPropagation() bersama-sama dengan contoh kod yang berguna. Selepas itu, kami akan memahami perbezaan antara kaedah stopPropagation() dan PreventDefault().

stopPropagation() kaedah acara - Elemen induk tidak boleh mengakses acara menggunakan kaedah ini kaedah. Secara umumnya, fungsi ini dicipta untuk menghalang berbilang panggilan ke acara yang sama sebar. Contohnya, jika elemen butang terkandung dalam teg div, dan kedua-duanya mempunyai a acara onclick, setiap kali kami cuba mengaktifkan acara yang dikaitkan dengan elemen butang, Peristiwa yang dikaitkan dengan elemen div juga akan dicetuskan kerana elemen div sememangnya Elemen butang.

Tatabahasa

event.stopPropagation();
Kaedah

stopPropagation() akan menyekat acara akses induk dan boleh digunakan Selesaikan masalah ini.

Contoh 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>

Selepas mengklik pada div luar "MY Second DIV(2)", kotak pengesahan dipaparkan sekali sahaja seperti yang ditunjukkan di bawah.

Selain itu, jika anda klik pada div dalam "MY First DIV(1)", kotak pengesahan akan muncul dua kali seperti yang ditunjukkan di bawah.

Seterusnya, selepas mengklik butang OK, div luar kotak pengesahan "DIV(2) Kedua Saya" akan muncul.

Hanya tandai kotak semak dan klik pada div dalam "DIV(1) Pertama saya" seperti Tangkapan skrin di bawah. Kotak pengesahan hanya muncul sekali.

Contoh 2

Dalam contoh ini, mari kita fahami cara kaedah event.stopPropagation() dilaksanakan, Ini akan menyebabkan satu fungsi dilaksanakan pada elemen butang. 

<!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>
Kaedah

preventDefault() - Ini ialah kaedah yang terdapat dalam antara muka acara. Dengan menggunakan kaedah ini, Menghalang penyemak imbas daripada melakukan tindakan lalai untuk elemen yang dipilih. hanya jika Jika teknologi dapat melakukan ini, acara itu boleh dibatalkan. Contohnya, acara tatal dan roda ialah Beberapa contoh peristiwa yang tidak dapat dielakkan.

Tatabahasa

preventDefault() Method

Contoh 3

Mari kita pelajari cara menghalang pautan daripada mengikuti URL dalam contoh ini supaya ia tidak boleh diakses oleh penyemak imbas Lawati halaman lain. 

<!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>

Klik pautan dan anda akan melihat kotak pengesahan yang menyatakan "Acara ini telah disekat dan anda tidak boleh mengakses URL

."

Atas ialah kandungan terperinci Apakah kegunaan kaedah stopPropagation dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript 接口 Event 事件
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menetapkan pengganda zum dalam rentetan URL objek IText menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menetapkan pengganda zum dalam rentetan URL objek IText menggunakan FabricJS?

Artikel berkaitan

Lihat lagi