ভূমিকা
HTML DOM stopPropagation() ইভেন্ট মেথড ব্যবহার করা হয় দেওয়া এলিমেন্টের প্রোপাগেশন রোধ করার জন্য। এর মানে হলো প্যারেন্ট এলিমেন্টে ক্লিক করলে সেটি চাইল্ডরাও প্রোপাগেট হবে না এবং চাইল্ড এলিমেন্টে ক্লিক করলে সেটি প্যারেন্টে প্রোপাগেট হবে না stopPropagation() মেথড ব্যবহার করে। ইভেন্ট প্রোপাগেশনকে ইভেন্ট বাবলিংও বলা হয়।
সিনট্যাক্স
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>
আউটপুট
এটি নিচের আউটপুটটি তৈরি করবে:
স্টপ প্রোপাগেশন মেথডে ক্লিক না করেই ডিভ এলিমেন্টের ভিতরের ইমেজ এলিমেন্টে ক্লিক করলে:
উপরে "Ok"-এ ক্লিক করলে:
স্টপ প্রোপাগেশন চেকবক্স চেক করে ইনার ইমেজে ক্লিক করলে:
