তারা একই কাজ করছে বলে মনে হচ্ছে ...
একজন আধুনিক এবং একজন বৃদ্ধ? বা তারা বিভিন্ন ব্রাউজার দ্বারা সমর্থিত হয়?
যখন আমি নিজে ইভেন্টগুলি পরিচালনা করি (কাঠামো ছাড়াই) আমি সবসময় উভয়ের জন্য যাচাই করি এবং উপস্থিত থাকলে উভয়ই সম্পাদন করি। (আমিও return false, তবে আমার এমন অনুভূতি রয়েছে যা সংযুক্ত ইভেন্টগুলির সাথে কাজ করে না node.addEventListener)।
তাহলে দুজনেই কেন? আমি উভয় জন্য চেক করা উচিত? নাকি আসলেই কোনও পার্থক্য রয়েছে?
(আমি জানি, অনেকগুলি প্রশ্ন, তবে সেগুলি একই ধরণের = =)
উত্তর:
stopPropagation ইভেন্ট চেইন বুদবুদ থেকে ইভেন্টটি থামায়।
preventDefault ব্রাউজারটি সেই ইভেন্টে করা ডিফল্ট ক্রিয়াটিকে বাধা দেয়।
preventDefault
$("#but").click(function (event) {
event.preventDefault()
})
$("#foo").click(function () {
alert("parent click event fired!")
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<button id="but">button</button>
</div>stopPropagation
$("#but").click(function (event) {
event.stopPropagation()
})
$("#foo").click(function () {
alert("parent click event fired!")
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<button id="but">button</button>
</div>এর সাথে stopPropagation, কেবলমাত্র buttonক্লিকের হ্যান্ডলারটি কল করা হয় যখন divক্লিকের হ্যান্ডলার কখনই জ্বলে না।
যেখানে আপনি ব্যবহার করেন preventDefault, কেবল ব্রাউজারের ডিফল্ট ক্রিয়া বন্ধ হয়ে যায় তবে ডিভের ক্লিকের হ্যান্ডলারটি এখনও জ্বলতে থাকে।
নীচে ডিওএম ইভেন্টের বৈশিষ্ট্য এবং এমডিএন থেকে প্রাপ্ত পদ্ধতিগুলির কয়েকটি ডক্স রয়েছে:
আইই 9 এবং এফএফ এর জন্য আপনি কেবলমাত্র ডিফল্ট এবং স্টপপ্রোগেশন প্রতিরোধ ব্যবহার করতে পারেন।
IE8 সমর্থন এবং প্রতিস্থাপন কম stopPropagationসঙ্গে cancelBubbleএবং প্রতিস্থাপন preventDefaultসঙ্গেreturnValue
cancelBubbleএবং returnValueউভয় সম্পত্তি (তাই সেট করা উচিত cancelBubble = true;) এবং এটি preventDefaultএবং stopPropagationপদ্ধতিগুলি (তাই বলা উচিত preventDefault();)
stopDefault()একইভাবে কাজ করতে পারি না তা নিয়ে যুক্তি জানাতে পারি stopPropagation()। যদি ডিফল্ট ক্রিয়াটি onclickপদ্ধতিটিকে কল না করে তবে তা কী?
Quirksmode.org থেকে :
ইভেন্ট ক্যাপচারিং
আপনি ইভেন্ট ক্যাপচার ব্যবহার যখন
| | --------------- | | ----------------- | উপাদান 1 | | | | ----------- | | ----------- | | | এলিমেন্ট 2 | / | | | ------------------------- | | ইভেন্ট ক্যাপচার | -----------------------------------এলিমেন্ট 1 এর ইভেন্ট হ্যান্ডলারটি প্রথমে আগুন দেয়, ইভেন্ট 2 এর আগুনের হ্যান্ডলার শেষ অবধি।
ইভেন্ট বুদবুদ
আপনি যখন ইভেন্ট বুদবুদ ব্যবহার করবেন
/ --------------- | | ----------------- | উপাদান 1 | | | | ----------- | | ----------- | | | এলিমেন্ট 2 | | | | | ------------------------- | | ইভেন্ট বুবলিং | -----------------------------------এলিমেন্ট 2 এর ইভেন্ট হ্যান্ডলারটি প্রথমে আগুন দেয়, ইভেন্ট 1 হ'ল এলেন্ডার শেষ অবধি।
ডাব্লু 3 সি ইভেন্টের মডেলটিতে যে কোনও ইভেন্ট সংঘটিত হয় প্রথমে এটি ক্যাপচার করা হয় যতক্ষণ না এটি লক্ষ্য উপাদানটিতে পৌঁছায় এবং তারপরে আবার বুদবুদ হয়ে যায় ।
| | / ----------------- | | - | | ----------------- | উপাদান 1 | | | | | | ------------- | | - | | ----------- | | | এলিমেন্ট 2 | / | | | | | -------------------------------- | | ডাব্লু 3 সি ইভেন্ট মডেল | ------------------------------------------
ইভেন্ট ক্যাপচারের জন্য w3.org থেকে :
ক্যাপচারিং
EventListenerইভেন্টটির আরও প্রক্রিয়াজাতকরণ ঘটতে বাধা দিতে চাইলেstopPropagationএটিEventইন্টারফেসের পদ্ধতিতে কল করতে পারে । এটি ইভেন্টটির আরও প্রেরণকে বাধা দেবে, যদিওEventListenersএকই শ্রেণিবিন্যাস পর্যায়ে অতিরিক্ত নিবন্ধিত এখনও ইভেন্টটি গ্রহণ করবে। কোনও ইভেন্টেরstopPropagationপদ্ধতিটি কল করার পরে, সেই পদ্ধতিতে আরও কলগুলি কোনও অতিরিক্ত প্রভাব ফেলবে না। যদি কোনও অতিরিক্ত ক্যাপচারার উপস্থিতstopPropagationনা থাকে এবং তাদের ডাকা না হয়, ইভেন্টটিEventListenersলক্ষ্যমাত্রায় উপযুক্তটিকে ট্রিগার করে।
জন্য ঘটনা সাড়া জাগানো :
যে কোনও ইভেন্ট হ্যান্ডলার ইন্টারফেসের
stopPropagationপদ্ধতিতে কল করে আরও ইভেন্টের প্রচার রোধ করতে বেছে নিতে পারেEvent। যদি কোনওEventListenerএই পদ্ধতিতে কলEventListenersকরে তবে বর্তমানের সমস্ত অতিরিক্তEventTargetট্রিগার করা হবে তবে বুবলিং সেই স্তরে থামবে।stopPropagationআরও বুদবুদ ঠেকাতে কেবল একটি কল করতে হবে।
জন্য ইভেন্ট বাতিল :
EventএরpreventDefaultপদ্ধতিটি কল করে ক্যানসেলেশন সম্পন্ন হয় । ইভেন্ট প্রবাহের যে কোনও পর্যায়ে এক বা একাধিকEventListenersকলpreventDefaultহলে ডিফল্ট ক্রিয়া বাতিল হয়ে যাবে।
নিম্নলিখিত উদাহরণগুলিতে, ওয়েব ব্রাউজারে হাইপারলিংকের একটি ক্লিক ইভেন্টের প্রবাহকে ট্রিগার করে (ইভেন্ট শ্রোতাদের মৃত্যুদন্ড কার্যকর করা হয়) এবং ইভেন্ট টার্গেটের ডিফল্ট ক্রিয়া (একটি নতুন ট্যাব খোলা হয়)।
এইচটিএমএল:
<div id="a">
<a id="b" href="http://www.google.com/" target="_blank">Google</a>
</div>
<p id="c"></p>javascript:
var el = document.getElementById("c");
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
}
function capturingOnClick2(ev) {
el.innerHTML += "A event capture<br>";
}
function bubblingOnClick1(ev) {
el.innerHTML += "DIV event bubbling<br>";
}
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling<br>";
}
// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);উদাহরণ 1 : এটি ফলাফল আউটপুট
DIV event capture
A event capture
A event bubbling
DIV event bubblingউদাহরণ 2 : stopPropagation()ফাংশনে যুক্ত করা
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
ev.stopPropagation();
}ফলাফল আউটপুট
DIV event captureইভেন্ট শ্রোতারা ইভেন্টটির আরও নীচে এবং wardর্ধ্বমুখী প্রচারকে বাধা দেয়। তবে এটি ডিফল্ট ক্রিয়া প্রতিরোধ করতে পারেনি (একটি নতুন ট্যাব খোলার)।
উদাহরণ 3 : stopPropagation()ফাংশনে যুক্ত করা
function capturingOnClick2(ev) {
el.innerHTML += "A event capture<br>";
ev.stopPropagation();
}বা ফাংশন
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling<br>";
ev.stopPropagation();
}ফলাফল আউটপুট
DIV event capture
A event capture
A event bubblingএটি কারণ উভয় ইভেন্ট শ্রোতা একই ইভেন্ট টার্গেটে নিবন্ধভুক্ত। ইভেন্ট শ্রোতারা ইভেন্টটির আরও wardর্ধ্বমুখী প্রচারকে বাধা দেয়। তবে তারা ডিফল্ট ক্রিয়া (একটি নতুন ট্যাব খোলার) আটকাতে পারেনি।
উদাহরণ 4 : preventDefault()উদাহরণস্বরূপ কোনও ফাংশনে যুক্ত করা
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
ev.preventDefault();
}নতুন ট্যাব খুলতে বাধা দেয়।
প্রত্যাবর্তন মিথ্যা;
return false; আপনি যখন কল করবেন তখন 3 আলাদা জিনিস করে:
event.preventDefault() - এটি ব্রাউজারগুলির ডিফল্ট আচরণ বন্ধ করে দেয়।event.stopPropagation() - এটি ইভেন্টটি ডিওএম প্রচার (বা "বুদবুদ") থেকে বাধা দেয়।নোট করুন যে এই আচরণটি স্বাভাবিক (j-jQuery) ইভেন্ট হ্যান্ডলারের থেকে পৃথক হয়, যার মধ্যে উল্লেখযোগ্যভাবে return falseঘটনাটি বুদবুদ হওয়া থেকে বিরত থাকে না।
preventDefault ();
preventDefault(); একটি কাজ করে: এটি ব্রাউজারগুলির ডিফল্ট আচরণ বন্ধ করে দেয়।
এগুলি কখন ব্যবহার করবেন?
আমরা জানি তারা কী করে তবে তাদের কখন ব্যবহার করা যায়? কেবল আপনি যা অর্জন করতে চান তার উপর নির্ভর করে। preventDefault();আপনি যদি ডিফল্ট ব্রাউজারের আচরণটি "ন্যায়বিচার" করতে চান তবে ব্যবহার করুন । রিটার্ন মিথ্যা ব্যবহার করুন; আপনি যখন ডিফল্ট ব্রাউজার আচরণটি আটকাতে চান এবং ইভেন্টটি ডিওএম প্রচার করা থেকে বিরত করতে চান। বেশিরভাগ পরিস্থিতিতে যেখানে আপনি মিথ্যা রিটার্ন ব্যবহার করবেন; আপনি কি সত্যিই চান preventDefault()।
উদাহরণ:
আসুন উদাহরণ সহ বোঝার চেষ্টা করুন:
আমরা খাঁটি জাভাস্ক্রিপ্ট উদাহরণ দেখতে পাব
উদাহরণ 1:
<div onclick='executeParent()'>
<a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
function executeChild() {
alert('Link Clicked');
}
function executeParent() {
alert('div Clicked');
}
</script>উপরের কোডটি চালান আপনি হাইপারলিংক দেখতে পাবেন 'স্ট্যাকওভারফ্লো ডট কম পরিদর্শন করতে এখানে ক্লিক করুন' এখন আপনি যদি সেই লিঙ্কটিতে ক্লিক করেন তবে প্রথমে জাভাস্ক্রিপ্ট সতর্কতা পাবেন লিঙ্ক ক্লিক করুন পরবর্তী আপনি জাভাস্ক্রিপ্ট সতর্কতা ডিভ ক্লিক করে পেয়ে যাবেন এবং তত্ক্ষণাত আপনাকে পুনঃনির্দেশিত করা হবে stackoverflow.com।
উদাহরণ 2:
<div onclick='executeParent()'>
<a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
function executeChild() {
event.preventDefault();
event.currentTarget.innerHTML = 'Click event prevented'
alert('Link Clicked');
}
function executeParent() {
alert('div Clicked');
}
</script>উপরের কোডটি চালান আপনি হাইপারলিংক দেখতে পাবেন 'স্ট্যাকওভারফ্লো ডট কম পরিদর্শন করতে এখানে ক্লিক করুন' এখন আপনি যদি সেই লিঙ্কটিতে ক্লিক করেন তবে প্রথমে জাভাস্ক্রিপ্ট সতর্কতা পাবেন লিঙ্ক ক্লিক করুন পরবর্তী আপনি জাভাস্ক্রিপ্ট সতর্কতা ডিভ ক্লিক করবেন তারপরে আপনি হাইপারলিংক দেখতে পাবেন ' স্ট্যাকওভারফ্লো ডট কম পরিদর্শন করতে এখানে ক্লিক করুন 'ক্লিক ইভেন্টটি প্রতিরোধ করা' টেক্সট দ্বারা প্রতিস্থাপন করা হয়েছে এবং আপনাকে স্ট্যাকওভারফ্লো.কম এ পুনঃনির্দেশিত করা হবে না । এটি ডিফল্ট ক্লিক ক্রিয়াকলাপটি ট্রিগার হওয়া রোধ করার জন্য আমরা ইভেন্ট.প্রিভেন্টডিফল্ট () পদ্ধতিটি ব্যবহার করি>
উদাহরণ 3:
<div onclick='executeParent()'>
<a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
function executeChild() {
event.stopPropagation();
event.currentTarget.innerHTML = 'Click event prevented'
alert('Link Clicked');
}
function executeParent() {
alert('div Clicked');
}
</script>এই সময় যদি আপনি লিঙ্কটিতে ক্লিক ফাংশন executeParent () বলা হয় না হবে এবং আপনি Javascript সতর্কতা পাবেন না DIV আছে ক্লিক এই সময়। এটি আমাদের ইভেন্ট.স্টপপ্রোপেশন () পদ্ধতিটি ব্যবহার করে পিতামাতার ডিভিতে প্রচার রোধ করার কারণে। এরপরে আপনি হাইপারলিংকটি দেখতে পাবেন 'স্ট্যাকওভারফ্লো ডট কম পরিদর্শন করতে এখানে ক্লিক করুন' পাঠ্যের পরিবর্তে 'ক্লিক ইভেন্টটি কার্যকর হবে' এবং তত্ক্ষণাত্ আপনাকে স্ট্যাকওভারফ্লো ডটকম এ পুনঃনির্দেশিত করা হবে। কারণ আমরা ইভেন্ট.প্রিভেন্টডেফাল্ট () পদ্ধতিটি ব্যবহার করে এবার ডিফল্ট ক্লিক ক্রিয়াকে ট্রিগার করতে বাধা পাইনি।
উদাহরণ 4:
<div onclick='executeParent()'>
<a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
function executeChild() {
event.preventDefault();
event.stopPropagation();
event.currentTarget.innerHTML = 'Click event prevented'
alert('Link Clicked');
}
function executeParent() {
alert('Div Clicked');
}
</script>আপনি যদি লিঙ্কটিতে ক্লিক করেন তবে এক্সিকিউটিউট প্যারেন্ট () ফাংশনটি কল করা হবে না এবং আপনি জাভাস্ক্রিপ্ট সতর্কতা পাবেন না। এটি আমাদের ইভেন্ট.স্টপপ্রোপেশন () পদ্ধতিটি ব্যবহার করে পিতামাতার ডিভিতে প্রচার রোধ করার কারণে। এরপরে আপনি হাইপারলিংকটি দেখতে পাবেন 'স্ট্যাকওভারফ্লো ডট কম পরিদর্শন করতে এখানে ক্লিক করুন' 'ক্লিক ইভেন্টটি প্রতিরোধ করা' টেক্সট দ্বারা প্রতিস্থাপন করা হয়েছে এবং আপনাকে স্ট্যাকওভারফ্লো ডটকম এ পুনঃনির্দেশিত করা হবে না। কারণ আমরা ইভেন্ট.প্রিভেন্টডেফল্ট () পদ্ধতিটি ব্যবহার করে এবার ডিফল্ট ক্লিক ক্রিয়াকে ট্রিগার করা থেকে বিরত করেছি।
উদাহরণ 5:
মিথ্যা ফেরতের জন্য আমার কাছে তিনটি উদাহরণ রয়েছে এবং সমস্তগুলি একই জিনিস (কেবল মিথ্যা প্রত্যাবর্তন) করছে বলে মনে হচ্ছে, তবে বাস্তবে ফলাফলগুলি একেবারেই আলাদা। উপরের প্রতিটিটিতে আসলে কী ঘটেছিল তা এখানে।
মামলা:
তিনটি উদাহরণ দেখতে পাবেন।
<div onclick='executeParent()'>
<a href='https://stackoverflow.com' onclick='return false'>Click here to visit stackoverflow.com</a>
</div>
<script>
var link = document.querySelector('a');
link.addEventListener('click', function() {
event.currentTarget.innerHTML = 'Click event prevented using inline html'
alert('Link Clicked');
});
function executeParent() {
alert('Div Clicked');
}
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href='https://stackoverflow.com'>Click here to visit stackoverflow.com</a>
</div>
<script>
$('a').click(function(event) {
alert('Link Clicked');
$('a').text('Click event prevented using return FALSE');
$('a').contents().unwrap();
return false;
});
$('div').click(function(event) {
alert('Div clicked');
});
</script><div onclick='executeParent()'>
<a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
function executeChild() {
event.currentTarget.innerHTML = 'Click event prevented'
alert('Link Clicked');
return false
}
function executeParent() {
alert('Div Clicked');
}
</script>আশা করি এই উদাহরণগুলি পরিষ্কার হয়ে গেছে। তারা কীভাবে কাজ করে তা দেখতে এইচটিএমএল ফাইলে এই সমস্ত উদাহরণ কার্যকর করার চেষ্টা করুন।
এই এখানে থেকে উদ্ধৃতি
Event.preventDefault
প্রতিরোধ ডিফল্ট পদ্ধতি কোনও ইভেন্টকে এর ডিফল্ট কার্যকারিতা সম্পাদন থেকে বিরত করে। উদাহরণস্বরূপ, বর্তমান উপাদানটি ছেড়ে যাওয়া থেকে এই উপাদানটি ক্লিক করা বন্ধ করতে আপনি একটি উপাদানটিতে প্রতিরোধের ডিফল্ট ব্যবহার করবেন:
//clicking the link will *not* allow the user to leave the page
myChildElement.onclick = function(e) {
e.preventDefault();
console.log('brick me!');
};
//clicking the parent node will run the following console statement because event propagation occurs
logo.parentNode.onclick = function(e) {
console.log('you bricked my child!');
};উপাদানটির ডিফল্ট কার্যকারিতা ব্রিকড হওয়ার পরেও ইভেন্টটি ডমকে বুদবুদ করতে চলেছে।
Event.stopPropagation
দ্বিতীয় পদ্ধতি, স্টপপ্রোপেশন, ইভেন্টের ডিফল্ট কার্যকারিতা ঘটতে দেয় তবে ইভেন্টটি প্রচার থেকে বাধা দেয়:
//clicking the element will allow the default action to occur but propagation will be stopped...
myChildElement.onclick = function(e) {
e.stopPropagation();
console.log('prop stop! no bubbles!');
};
//since propagation was stopped by the child element's onClick, this message will never be seen!
myChildElement.parentNode.onclick = function(e) {
console.log('you will never see this message!');
};স্টপপ্রোগেশন অভিভাবক উপাদানগুলিকে তার সন্তানের প্রদত্ত ইভেন্ট সম্পর্কে কার্যকরভাবে থামায়।
যদিও একটি সাধারণ স্টপ পদ্ধতি আমাদের দ্রুত ইভেন্টগুলি পরিচালনা করতে দেয় তবে বুদবুদ দিয়ে আপনি ঠিক কী ঘটতে চান তা চিন্তা করা গুরুত্বপূর্ণ। আমি বাজি ধরব যে সমস্ত বিকাশকারী সত্যই চায় 90% সময়ের ডিফল্টকে প্রতিরোধ করে! ভুলভাবে কোনও ইভেন্ট "থামানো" আপনাকে লাইনের নীচে অসংখ্য ঝামেলা করতে পারে; আপনার প্লাগইনগুলি কাজ না করে এবং আপনার তৃতীয় পক্ষের প্লাগইনগুলি ব্রিক করা যেতে পারে। বা আরও খারাপ - আপনার কোডটি কোনও সাইটে অন্য কার্যকারিতা ভঙ্গ করে।
ইভেন্ট.প্রিভেন্টডিফল - ব্রাউজারের ডিফল্ট আচরণ বন্ধ করে। ব্রাউজারের ডিফল্ট আচরণ কী তা এখন আসে। ধরুন আপনার কাছে একটি অ্যাঙ্কর ট্যাগ রয়েছে এবং এটি একটি href বৈশিষ্ট্য পেয়েছে এবং এই অ্যাঙ্কর ট্যাগটি ডিভ ট্যাগের ভিতরে বাসা বেঁধেছে যা একটি ক্লিক ইভেন্ট পেয়েছে। অ্যাঙ্কর ট্যাগের ডিফল্ট আচরণটি অ্যাঙ্কর ট্যাগে ক্লিক করা হয় যখন এটি নেভিগেট করা উচিত, তবে ইভেন্ট.প্রিভেন্টডাফল্ট কী করে তা এই ক্ষেত্রে নেভিগেশনকে থামিয়ে দেয়। তবে এটি কখনই ইভেন্টের উদোমতা বা ইভেন্টের বর্ধনকে থামায় না
<div class="container">
<a href="#" class="element">Click Me!</a>
</div>
$('.container').on('click', function(e) {
console.log('container was clicked');
});
$('.element').on('click', function(e) {
e.preventDefault(); // Now link won't go anywhere
console.log('element was clicked');
});ফলাফল হবে
"উপাদান ক্লিক করা হয়েছিল"
"ধারকটি ক্লিক করা হয়েছিল"
এখন ইভেন্ট.স্টপপ্রপেশন এটি ইভেন্টের বুবলিং বা ইভেন্টের ক্রমবর্ধমানকে থামায়। এখন উপরের উদাহরণ সহ
$('.container').on('click', function(e) {
console.log('container was clicked');
});
$('.element').on('click', function(e) {
e.preventDefault(); // Now link won't go anywhere
e.stopPropagation(); // Now the event won't bubble up
console.log('element was clicked');
});ফলাফল হবে
"উপাদান ক্লিক করা হয়েছিল"
আরও তথ্যের জন্য এই লিঙ্কটি দেখুন https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimediapropagation/
event.preventDefault(); ঘটনার থেকে কোনও উপাদানের ডিফল্ট ক্রিয়া বন্ধ করে দেয়।
event.stopPropagation(); কোনও পিতামাত্ত হ্যান্ডলারকে ইভেন্টটি সম্পর্কে অবহিত করা থেকে বাঁচিয়ে, ডিওএম ট্রিটি বুদ্বুদ করা থেকে ইভেন্টটিকে আটকায়।
উদাহরণস্বরূপ, যদি কোনও লিঙ্কের অভ্যন্তরে কোনও ক্লিক পদ্ধতির সাথে সংযুক্ত থাকে DIVবা এর FORMসাথে একটি ক্লিক পদ্ধতিও সংযুক্ত থাকে, তবে এটি DIVবা FORMক্লিকের পদ্ধতিটিকে গুলি চালানো থেকে আটকাবে ।
$("#but").click(function(event){
console.log("hello");
event.preventDefault();
});
$("#foo").click(function(){
alert("parent click event fired !");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<button id="but">button</button>
</div>
event.stopফাংশনে উভয়ই করে ... এছাড়াও অদ্ভুত আমার কোনও সমস্যা হয়নি। আমি প্রচুর বুদবুদ ব্যবহার করি। উদাহরণের জন্য ধন্যবাদ!