HTML DOM stopPropagation() ইভেন্ট পদ্ধতিটি প্রদত্ত উপাদানের প্রচার বন্ধ করার জন্য ব্যবহৃত হয়। এর মানে হল যে প্যারেন্ট এলিমেন্টে ক্লিক করা বাচ্চাদের কাছে প্রচারিত হবে না এবং বাচ্চাদের এলিমেন্টে ক্লিক করলে stopPropagtion() পদ্ধতি ব্যবহার করে অভিভাবকদের কাছে প্রচার হবে না। ইভেন্ট প্রচারকে ইভেন্ট বাবলিংও বলা হয়।
সিনট্যাক্স
নিচে stopPropagation() ইভেন্ট মেথড -
-এর সিনট্যাক্স দেওয়া হলevent.stopPropagation()
উদাহরণ
আসুন আমরা stopPropagation() ইভেন্ট মেথড -
-এর উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<style>
#DIV_1 {
background: lightpink;
width:130px;
height:130px;
margin-left:40%;
text-align:center;
}
#IMG_1 {
width:100px;
height:100px;
position:relative;
left:5px;
}
</style>
</head>
<body>
<h1>stopPropagation() method example</h1>
<div id="DIV_1" onclick="OuterDiv()">
DIV ELEMENT
<img onclick="InnerImg(event)" id="IMG_1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
</div>
Stop propagation:
<input type="checkbox" id="check">
<script>
function InnerImg(event) {
confirm("Inner Image is clicked");
if (document.getElementById("check").checked) {
event.stopPropagation();
}
}
function OuterDiv() {
confirm("Outer div is clicked");
}
</script>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
স্টপ প্রপাগেশন মেথড-
-এ প্রথমে ক্লিক না করেই div এলিমেন্টের ভিতরে ইমেজ এলিমেন্টে ক্লিক করলে
উপরে "ঠিক আছে" ক্লিক করলে -
স্টপ প্রোপাগেশন চেকবক্স চেক করার পরে এবং তারপরে ভিতরের ছবিতে ক্লিক করুন -
