জেকুয়েরি event.stopPropagation() মেথড
সংজ্ঞা এবং ব্যবহার
event.stopPropagation() মেথড ইভেন্টকে প্যারেন্ট এলিমেন্টে বাবলিং হতে বাধা দেয়, এছাড়াও প্যারেন্টের যেকোন ইভেন্ট হ্যান্ডলারকে সম্পাদন হতে বাধা দেয়।
টিপস: ইভেন্টের জন্য এই মেথডকে কল করা হয়েছে কিনা যাচাই করতে event.isPropagationStopped() মেথড ব্যবহার করুন।
সিনট্যাক্স ও ব্যাখ্যা
event.stopPropagation()
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে event.stopPropagation() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| event | আবশ্যক। ইভেন্ট বাইন্ডিং ফাংশন থেকে event প্যারামিটারটি এসেছে। |
event.stopPropagation() মেথড সংক্রান্ত উদাহরণ
কিভাবে ক্লিক ইভেন্টকে প্যারেন্ট এলিমেন্টে বাবলিং হতে বাধা দেয় তা নিচে দেখানো হলো:
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
div{
height: 100px;
width:300px;
padding: 15px;
border: 1px solid red;
background-color: green;
</style>
<script>
$(document).ready(function(){
$("div").click(function(event){
alert("ইভেন্ট হ্যান্ডেলার ১ কার্যকর হয়েছে।");
event.stopImmediatePropagation();
});
$("div").click(function(event){
alert("ইভেন্ট হ্যান্ডেলার ২ কার্যকর হয়েছে।");
});
$("div").click(function(event){
alert("ইভেন্ট হ্যান্ডেলার ৩ কার্যকর হয়েছে।");
});
});
</script>
</head>
<body>
<div>এই ডিভ(div) এলিমেন্টের উপর ক্লিক করুন</div>
<p>দ্বিতীয় এবং তৃতীয় ক্লিক ইভেন্ট event.stopImmediatePropagation() কারণে কার্যকর করা হবে না। এই পদ্ধতি নিশ্চিহ্ন এবং দেখার জন্য সেখানে কি ঘটছে দেখার চেষ্টা করুন।
</body>
</html>
ফলাফল