নিম্নোক্ত বিবেচনা কর:
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>আমি কীভাবে এটি তৈরি করতে পারি যাতে যখন ব্যবহারকারী স্প্যানটি ক্লিক করে, এটির divক্লিক ইভেন্টটিকে আগুন না দেয় ?
উত্তর:
ইভেন্ট.স্টপপ্রোপেশন () ব্যবহার করুন ।
<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>আই আই এর জন্য: window.event.cancelBubble = true
<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>eventআইওএস সাফারিতেও ইনলাইন ইভেন্টগুলিতে উপলব্ধ বলে মনে হচ্ছে।
কোনও ক্রিয়াকলাপের ভিতরে থেকে ইভেন্টের বিষয়টি পাওয়ার দুটি উপায় রয়েছে:
আপনার যদি এমন লিগ্যাসি ব্রাউজারগুলি সমর্থন করতে হয় যা ডাব্লু 3 সি সুপারিশ অনুসরণ করে না, সাধারণত কোনও ফাংশনের অভ্যন্তরে আপনি নীচের মতো কিছু ব্যবহার করতে পারেন:
function(e) {
var event = e || window.event;
[...];
}যা প্রথমে একটি যাচাই করে এবং তারপরে অন্যটি এবং ইভেন্ট ভেরিয়েবলের ভিতরে যা কিছু পাওয়া যায় সেটিকে স্টোর করে। তবে একটি ইনলাইন ইভেন্ট হ্যান্ডলারটিতে eব্যবহার করার মতো কোনও সামগ্রী নেই। সেক্ষেত্রে আপনাকে argumentsসংগ্রহটি সদ্ব্যবহার করতে হবে যা সর্বদা উপলভ্য এবং কোনও কার্যক্রমে পাস হওয়া আর্গুমেন্টের সম্পূর্ণ সেটকে বোঝায়:
onclick="var event = arguments[0] || window.event; [...]"তবে, সাধারণভাবে বলতে গেলে আপনার প্রচার বন্ধ করার মতো জটিল কিছু করতে চাইলে আপনার ইনলাইন ইভেন্ট হ্যান্ডলারগুলি এড়ানো উচিত। আপনার ইভেন্ট হ্যান্ডলারগুলিকে আলাদাভাবে লেখা এবং উপাদানগুলির সাথে তাদের সংযুক্তি পাঠযোগ্যতা এবং রক্ষণাবেক্ষণের জন্য উভয়ই মাঝারি এবং দীর্ঘ মেয়াদে অনেক ভাল ধারণা।
onclick="foo(event)"তারপর ফাংশনে পাস করতে পারেন function foo(event){/* do stuff with event */}। এটি আইই এবং ডাব্লু 3 সি ইভেন্ট উভয় মডেলেই কাজ করে।
মনে রাখবেন যে ফায়ারফক্সে উইন্ডো eসভেন্ট সমর্থিত নয়, এবং তাই এটি অবশ্যই এর লাইনের সাথে কিছু হতে পারে:
e.cancelBubble = trueঅথবা, আপনি ফায়ারফক্সের জন্য ডাব্লু 3 সি স্ট্যান্ডার্ড ব্যবহার করতে পারেন:
e.stopPropagation();যদি আপনি অভিনবতা পেতে চান তবে আপনি এটি করতে পারেন:
function myEventHandler(e)
{
if (!e)
e = window.event;
//IE9 & Other Browsers
if (e.stopPropagation) {
e.stopPropagation();
}
//IE8 and Lower
else {
e.cancelBubble = true;
}
}<div onclick="myEventHandler(event);">
e.cancelBubbleআই-তে মিথ্যা ফেরত! এটি e.cancelBubble = true;নির্দেশে পৌঁছতে পারে না । পরিবর্তে সফটওয়্যারআরএম এর শর্তটি ব্যবহার করুন !!
এই ফাংশনটি ব্যবহার করুন, এটি সঠিক পদ্ধতির অস্তিত্বের জন্য পরীক্ষা করবে।
function disabledEventPropagation(event)
{
if (event.stopPropagation){
event.stopPropagation();
}
else if(window.event){
window.event.cancelBubble=true;
}
}আইই-তে জেএস ত্রুটি বাক্স - আমার একই সমস্যা ছিল - যতদূর আমি দেখতে পাচ্ছি এগুলি সমস্ত ব্রাউজারে সূক্ষ্মভাবে কাজ করে (ইভেন্ট.cancelBبل = সত্যই আইই তে কাজ করে)
onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"এটি আমার পক্ষে কাজ করেছে
<script>
function cancelBubble(e) {
var evt = e ? e:window.event;
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>
<div onclick="alert('Click!')">
<div onclick="cancelBubble(event)">Something inside the other div</div>
</div>এএসপি.এনইটি ওয়েব পৃষ্ঠাগুলির জন্য (এমভিসি নয়), আপনি Sys.UI.DomEventস্থানীয় ইভেন্টের মোড়ক হিসাবে বস্তুটি ব্যবহার করতে পারেন ।
<div onclick="event.stopPropagation();" ...বা, ইভেন্টটিকে অভ্যন্তরীণ ফাংশনে প্যারামিটার হিসাবে পাস করুন:
<div onclick="someFunction(event);" ...এবং কিছু কাজ:
function someFunction(event){
event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
// other onclick logic
}কর্মের কারণে আমি মন্তব্য করতে পারি না তাই আমি এটি পুরো উত্তর হিসাবে লিখি: গ্যারেথের উত্তর অনুসারে (var e = arguments [0] || window.event; [...]) আমি অনক্লিকের জন্য এই অনেলাইনার ইনলাইনটি ব্যবহার করেছি দ্রুত হ্যাক:
<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>আমি জানি এটি দেরি হয়ে গেছে তবে আমি আপনাকে জানাতে চাই যে এটি একটি লাইনে কাজ করে। ধনুর্বন্ধনীগুলি এমন একটি ইভেন্ট ফেরত দেয় যা উভয় ক্ষেত্রেই স্টপপ্রোগেশন-ফাংশন সংযুক্ত থাকে, তাই আমি এগুলি এবং যদি এটির মতো .... তবে এটি বন্ধনীগুলিতে আবদ্ধ করার চেষ্টা করেছি। :)
এটিও কাজ করে - লিঙ্কটিতে এইচটিএমএল এই জাতীয় রিটার্ন সহ অন্লিক ব্যবহার করে:
<a href="mypage.html" onclick="return confirmClick();">Delete</a>এবং তারপরে কমফার্মিক্লিক () ফাংশনটি এমন হওয়া উচিত:
function confirmClick() {
if(confirm("Do you really want to delete this task?")) {
return true;
} else {
return false;
}
};confirmপ্রাসঙ্গিক নয়। আমি রিটার্ন মান উল্লেখ করছি । উদ্ধৃতি: লিংক এইচটিএমএল ব্যবহার onclick ইন মত এই ফিরতি সঙ্গে
কোন উপাদানটি ক্লিক করা হয়েছিল তা খালি কেন পরীক্ষা করবেন না? আপনি যদি কিছুতে ক্লিক করেন তবে window.event.targetযে উপাদানটি ক্লিক করা হয়েছিল তাকে বরাদ্দ করা হয়েছে এবং ক্লিক করা উপাদানটি একটি আর্গুমেন্ট হিসাবেও পাস হতে পারে।
যদি লক্ষ্য এবং উপাদান সমান না হয় তবে এটি এমন একটি ইভেন্ট যা প্রচার করেছিল।
function myfunc(el){
if (window.event.target === el){
// perform action
}
}
<div onclick="myfunc(this)" /><div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header'); event.stopPropagation()">
something inside the header
</span>
</div>জাভাস্ক্রিপ্ট ফাংশনটির মাধ্যমে ইভেন্টটির সাথে সেরা সমাধানটি হ্যান্ডেল করা হবে তবে এইচটিএমএল উপাদানটি সরাসরি ব্যবহার করে একটি সহজ এবং দ্রুত সমাধান ব্যবহার করার জন্য এবং একবার "ইভেন্ট" এবং "উইন্ডো.ভেনव्ह" অবমূল্যায়ন করা হয় এবং সর্বজনীন সমর্থনযোগ্য নয় ( https://developer.mozilla.org/en-US/docs/Web/API/Window/event ), আমি নিম্নলিখিত "হার্ড কোড" পরামর্শ দিই:
<div onclick="alert('blablabla'); (arguments[0] ? arguments[0].stopPropagation() : false);">...</div>