Cara berkesan menghalang peristiwa daripada menggelegak-tutorial js-php.cn

Cara berkesan menghalang peristiwa daripada menggelegak

WBOY

Lepaskan： 2024-02-19 20:25:05

asal

499 orang telah melayarinya

Cara berkesan menghalang peristiwa daripada menggelegak

Bagaimanakah dengan berkesan menghalang peristiwa yang menggelegak memerlukan contoh kod tertentu yang menggelegak bermakna bahawa apabila peristiwa pada elemen dicetuskan, elemen induk juga akan menerima pencetus peristiwa yang sama. pembangunan web, jadi kita perlu belajar cara mencegah peristiwa menggelegak dengan berkesan.

Dalam JavaScript, kita boleh menghentikan acara daripada menggelegak dengan menggunakan kaedah stopPropagation() objek acara. Kaedah ini boleh dipanggil dalam pengendali acara untuk menghentikan acara daripada menyebar ke elemen induk. Di bawah ialah beberapa senario biasa dan contoh kod yang sepadan untuk menunjukkan cara menggunakan kaedah stopPropagation() untuk menghentikan acara menggelegak.

Senario 1: Menghalang peristiwa klik elemen induk apabila butang diklik

<!DOCTYPE html>
<html>
  <head>
    <title>阻止事件冒泡</title>
    <style>
      /* 简单的样式用于演示 */
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box" onclick="alert('点击了盒子！')">
      <button onclick="event.stopPropagation(); alert('点击了按钮！')">点击我</button>
    </div>
  </body>
</html>

Salin selepas log masuk

Dalam kod di atas, peristiwa klik butang akan dicetuskan apabila butang diklik, dan disebabkan oleh panggilan stopPropagation( ), acara klik dihalang daripada menggelegak ke elemen peringkat elemen induk. Oleh itu, apabila mengklik butang, tetingkap pop timbul "Kotak diklik!" tidak akan dicetuskan lagi.

Senario 2: Halang halaman daripada melompat apabila anda mengklik pada pautan

<!DOCTYPE html>
<html>
  <head>
    <title>阻止事件冒泡</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      /* 简单的样式用于演示 */
      .container {
        width: 300px;
        height: 300px;
        background-color: lightblue;
        padding: 20px;
      }
      .link {
        display: block;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <a href="https://www.example.com" onclick="event.stopPropagation(); alert('点击了链接！')">点击我跳转</a>
    </div>
  </body>
</html>

Salin selepas log masuk

Dalam kod di atas, apabila anda mengklik pada pautan, peristiwa klik pautan akan dicetuskan, dan disebabkan oleh panggilan stopPropagation( ) kaedah, acara klik dihalang daripada menggelegak ke elemen induk . Oleh itu, apabila mengklik pautan, lompatan halaman tidak akan dicetuskan lagi.

Ringkasan:

Dengan menggunakan kaedah stopPropagation(), kita boleh menghalang peristiwa daripada menggelegak ke elemen induk dalam pengendali acara tertentu. Ini berguna dalam situasi di mana anda perlu mengendalikan acara klik pada elemen kanak-kanak secara individu atau menghalang lompatan halaman. Mudah-mudahan contoh di atas akan membantu anda memahami dengan lebih baik cara mencegah peristiwa daripada menggelegak dengan berkesan.

Atas ialah kandungan terperinci Cara berkesan menghalang peristiwa daripada menggelegak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!