Kadangkala, kita perlu menambah acara yang sama pada elemen HTML bersarang. Sebagai contoh, kita mempunyai dua div, satu div induk dan satu lagi div anak. Kini, kita perlu menambah acara onclick pada div ibu bapa dan anak dan melaksanakan fungsi yang berbeza apabila pengguna mengklik pada div ibu bapa dan anak. Dalam kes ini, ia akan sentiasa melaksanakan acara pada div ibu bapa dan anak.
Mari kita lihat cara melakukan acara yang sama pada elemen HTML bersarang dengan contoh berikut.
Contoh
Dalam contoh di bawah, kami telah mencipta dua div. Kami memberikan div luar nama kelas "parent-div" dan div dalam nama kelas "child-div".
Selain itu, kami juga menambah acara onclick untuk melaksanakan fungsi berbeza pada dua elemen div. Apabila pengguna mengklik pada div dalam, acara klik juga dicetuskan dalam div induk.
<html>
<head>
<style>
.parent-div {
width: 300px;
height: 150px;
margin: 50px;
padding: 10px;
background-color: lightblue;
}
.child-div {
width: 100px;
height: 70px;
margin: 30px;
padding: 10px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h3>Adding the same events <i> to nested HTML elements </i> in JavaScript</h3>
<p>Click on the below parent & child DIVs to see the result</p>
<div class = "parent-div" onclick = "executeParent()"> Parent DIV
<div class = "child-div" onclick = "executeChild()"> Child DIV </div>
</div>
<div id="content"> </div>
<script>
let content = document.getElementById("content");
function executeParent() {
content.innerHTML += "Parent div clicked <br>";
}
function executeChild() {
content.innerHTML += "Child div clicked <br>";
}
</script>
</body>
</html>
Salin selepas log masuk
Kita perlu menggunakan peristiwa untuk menyelesaikan masalah di atas, seperti mengklik pada div anak dan memanggil kaedah klik acara.stopPropogation() div induk.
Tatabahasa
Pengguna boleh menggunakan kaedah stopPropgation() mengikut sintaks berikut untuk menghentikan penyebaran peristiwa ke elemen induk.
Event.stopPropogation();
Salin selepas log masuk
Contoh
Dalam contoh di bawah, kami telah menambah beberapa teks di dalam teg HTML
dan menambah beberapa teks dalam acara onclick yang melaksanakan fungsi executeP(). Selain itu, kami menambah teg
di dalam teg dan menambahkan acara "onclick" pada teg span yang melaksanakan fungsi executeSpan().
Selain itu, kami menggunakan kaedah event.stoPropogation() dengan acara onclick elemen untuk menghentikan penyebaran acara pada teg apabila pengguna mengklik .
Dalam output, pengguna boleh melihat bahawa apabila mereka mengklik pada teks elemen , ia hanya melaksanakan fungsi executeSpan().
<html>
<body>
<h3>Adding the same events <i> to nested HTML elements and using the event.stopPropogation() method </i> in JavaScript </h3>
<p style = "cursor: pointer;" onclick="executeP()"> Hello users! How are you? <span Onclick = "event.stopPropagation(); executeSpan();"> Child Span </span> </p>
<div id = "content"> </div>
<script>
let content = document.getElementById("content");
function executeP() {
content.innerHTML += "Clicked on the p element. <br>";
}
function executeSpan() {
content.innerHTML += "Clicked on the Span element! <br>";
}
</script>
</body>
</html>
Salin selepas log masuk
Contoh
Dalam contoh di bawah, kami telah mencipta hierarki tiga elemen bersarang menggunakan penanda HTML. Kami menambah acara onclick pada setiap elemen. Jika kita tidak menggunakan kaedah event.stopPropogation(), ia sentiasa melaksanakan fungsi firstDivClick().
Untuk menyelesaikan masalah ini, kami menghantar peristiwa sebagai parameter fungsi apabila memanggilnya dan menggunakan kaedah stopPropogation() di dalam fungsi.
Pengguna boleh melihat bahawa apabila mereka mengklik pada teks Menu, ia hanya melaksanakan fungsi kebabMenuClick(). Apabila pengguna mengklik pada div kedua, ia hanya melaksanakan fungsi secondaryDivClick().
<html>
<head>
<style>
.card-1 {
width: 300px;
height: 200px;
background-color: red;
cursor: pointer;
}
.card-2 {
width: 200px;
height: 150px;
background-color: blue;
cursor: pointer;
}
.kebab-menu {
font-size: 1.2rem;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Adding the same events <i> to nested HTML elements and using the event.stopPropogation() method </i> in JavaScript </h3>
<div class = "card-1" onclick = "firstDivClick(event)">
<div class = "card-2" onclick = "secondDivClick(event)">
<div class = "kebab-menu" onclick = "kebabMenuClick(event)"> Menu </div>
</div>
</div>
<div id = "content"> </div>
<script>
let content = document.getElementById("content");
function firstDivClick(event) {
content.innerHTML += "first div clicked <br>";
}
function secondDivClick(event) {
event.stopPropagation();
content.innerHTML += "second div clicked <br>";
}
function kebabMenuClick(event) {
event.stopPropagation();
content.innerHTML += "kebab menu clicked <br>";
}
</script>
</body>
</html>
Salin selepas log masuk
Pengguna belajar menggunakan kaedah acara.stopPorpogation() pada acara. Pada asasnya, ia digunakan untuk menghalang peristiwa daripada disebarkan kepada elemen induk. Dengan cara ini, apabila peristiwa yang sama mencetuskan elemen ibu bapa-anak, kita boleh melaksanakan fungsi yang berbeza untuk semua elemen anak.
Atas ialah kandungan terperinci Bagaimana untuk menghentikan penyebaran acara menggunakan atribut onclick inline dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
