jquery স্টপ সন্তানের পিতামাতার ইভেন্ট ট্রিগার করে

Question

আমার একটি ডিভ রয়েছে যা আমি একটি onclickইভেন্ট সংযুক্ত করেছি । এই বিভাগে একটি লিঙ্ক সহ একটি ট্যাগ আছে। আমি যখন লিঙ্কটি ক্লিক করি তখন onclickডিভ থেকে ইভেন্টটিও ট্রিগার হয়। আমি কীভাবে এটি অক্ষম করতে পারি যাতে লিঙ্কটি ডিভের উপর ক্লিক করা হয় তবে onclickতা বহিস্কার করা হয়নি?

লিপি:

$(document).ready(function(){
    $(".header").bind("click", function(){
         $(this).children(".children").toggle();
    });
})

এইচটিএমএল কোড:

<div class="header">
    <a href="link.html">some link</a>
    <ul class="children">
        <li>some list</li>
    </ul>
</div>

Answer 1

এটা কর:

$(document).ready(function(){
    $(".header").click(function(){
        $(this).children(".children").toggle();
    });
   $(".header a").click(function(e) {
        e.stopPropagation();
   });
});

আপনি যদি .stopPropagation () এ আরও পড়তে চান তবে এখানে দেখুন ।

Comments

যদি এটি কাউকে সহায়তা করে তবে আমি প্রতিস্থাপন $(".header a")করেছি $(".header *")এবং যে কোনও শিশুকে নির্বাচিত করেছি (ডিভি, ফর্ম, ইনপুট ইত্যাদি)।

— aldo.roman.nurena

e.stopPropagation (); এটি প্রথম কাজ করতে হবে, যদি না এটি কাজ করে না!

— এহসান

দুর্ভাগ্যক্রমে এই পদ্ধতিটি relকনফিগার করা লাইটবক্সকে কাজ করতে

— আটকাচ্ছে

Xr280xr দ্বারা নীচের উত্তরটি আরও ভাল, কারণ এটি শিশুদের সম্ভাব্য ইভেন্টগুলিতে হস্তক্ষেপ করে না।

— আলেকজান্ডার জাঙ্ক

আপনি সমাধানের চেয়ে আরও বেশি সমস্যা তৈরি করেন। তৃতীয় পক্ষের প্লাগইনগুলি দস্তাবেজ উপাদানটিতে ইভেন্ট ক্লিক করতে শুনুন gine তারা এই ক্লিকগুলি সম্পর্কে কখনই জানতে পারবে না। লাইটবক্স সম্পর্কে মন্তব্য দেখুন।

— সালমান এ

Answer 2

বা অন্য কোনও হ্যান্ডলারকে আটকাতে অতিরিক্ত ইভেন্ট হ্যান্ডলার রাখার চেয়ে আপনি এটি ব্যবহার করতে পারেন রেখে, আপনার ক্লিক ইভেন্ট হ্যান্ডলারের কাছে পাস করা ইভেন্ট অবজেক্ট আর্গুমেন্টটি কোনও শিশুকে ক্লিক করা হয়েছে কিনা তা নির্ধারণ । targetক্লিক করা উপাদান currentTargetহবে এবং হেডার ডিভ হবে:

$(".header").click(function(e){
     //Do nothing if .header was not directly clicked
     if(e.target !== e.currentTarget) return;

     $(this).children(".children").toggle();
});

Comments

আমার কাছে এটি আরও মার্জিত সমাধান যেহেতু আপনাকে প্রতিটি সন্তানের উপাদানগুলিতে একটি স্পষ্ট প্রতিরোধ ডিফল্ট () যুক্ত করতে হবে না।

— রায়ান গ্রিগস

এবং যদি এটি গৃহীত উত্তর থেকে ভিন্ন আপনার সন্তানের উপর স্বাধীন ইভেন্ট থাকে তবে এটি কাজ করে। অবশ্যই ক্লিনার এবং আরও ভাল সমাধান

— বোজানিকজোসিপ

বেশিরভাগ পরিস্থিতিতে আপনি এটি সম্পর্কে চিন্তা করবেন না, তবে যে কারণেই যদি আপনার আইই 6-8 সমর্থন করা প্রয়োজন, তাদের নেইcurrentTarget । একটি ওয়ার্কঅ্যারাউন্ড সঙ্গে এটি প্রতিস্থাপন হয় thisহিসাবে প্রস্তাব, অন্য উত্তর ।

— আলেকজান্ডার জাঙ্ক

কেবল ক্লিকগুলি ধরার জন্য অতিরিক্ত শ্রোতার সেট করার চেয়ে এটি একটি ক্লিনার সমাধান।

— মাইক্রোস

এই কোডটি আমার জন্য ভাল কাজ করেছে = টার্গেট = $ (e.target); যদি (! লক্ষ্য.is ("স্প্যান")) ফিরে আসে; `

— Cr1xus

Answer 3

() ব্যবহার করে চেইন সহ আরও ভাল উপায় ,

$(document).ready(function(){
    $(".header").on('click',function(){
        $(this).children(".children").toggle();
    }).on('click','a',function(e) {
        e.stopPropagation();
   });
});

Answer 4

এখানে উত্তরগুলি ওপির প্রশ্নটিকে খুব আক্ষরিকভাবে নিয়েছে। এই উত্তরগুলি এমন পরিস্থিতিতে কীভাবে প্রসারিত করা যেতে পারে যেখানে কেবলমাত্র একটি <a>ট্যাগ নয়, অনেকগুলি শিশু উপাদান রয়েছে ? এখানে একটি উপায়।

ধরা যাক আপনার ব্ল্যাকআউট ব্যাকগ্রাউন্ড এবং ব্রাউজারকে কেন্দ্র করে ফটো সহ একটি ফটো গ্যালারী রয়েছে। আপনি যখন কালো পটভূমিতে ক্লিক করেন (তবে এর অভ্যন্তরের কিছুই নয়) আপনি ওভারলেটি বন্ধ হতে চান।

এখানে কিছু সম্ভাব্য এইচটিএমএল:

<div class="gallery" style="background: black">
    <div class="contents"> <!-- Let's say this div is 50% wide and centered -->
        <h1>Awesome Photos</h1>
        <img src="img1.jpg"><br>
        <img src="img2.jpg"><br>
        <img src="img3.jpg"><br>
        <img src="img4.jpg"><br>
        <img src="img5.jpg">
    </div>
</div>

এবং এখানে জাভাস্ক্রিপ্ট কীভাবে কাজ করবে তা এখানে:

$('.gallery').click(
    function()
    {
        $(this).hide();
    }
);

$('.gallery > .contents').click(
    function(e) {
        e.stopPropagation();
    }
);

এটি .contentsপ্রতিটি গবেষণার ভিতরে থাকা উপাদানগুলির ক্লিক ইভেন্টগুলিকে থামিয়ে দেবে .galleryতাই আপনি বিবর্ণ কালো পটভূমির অঞ্চলটিতে ক্লিক করলেই গ্যালারীটি বন্ধ হবে, তবে আপনি যখন বিষয়বস্তুতে ক্লিক করবেন তখন নয়। এটি বিভিন্ন বিভিন্ন পরিস্থিতিতে প্রয়োগ করা যেতে পারে।

Answer 5

আমি এই প্রশ্নের হোঁচট খেয়েছি, অন্য উত্তর খুঁজছি।

আমি সমস্ত বাচ্চাদের পিতামাতাকে ট্রিগার করতে বাধা দিতে চেয়েছিলাম ।

javascript:

document.getElementById("parent").addEventListener("click",  function (e) {
    if (this !== event.target) return;
    // Do something
});

JQuery:

$("#parent").click(function () {
    // Do something
}).children().on("click", function (e) {
    e.stopPropagation();
});

Answer 6

অথবা এটা:

$(document).ready(function(){
    $(".header").click(function(){
        $(this).children(".children").toggle();
    });
   $(".header a").click(function(e) {
        return false;
   });
});

Comments

@ Halcyon991 ই আর্গুমেন্ট মাধ্যমে উভয় ক্ষেত্রেই পাস পরার, ই শুধু একটি রেফারেন্স

— qodeninja

@ কোডেনিনজা হ্যাঁ, তবে এটি ব্যবহার না করা হলে একটি অনর্থক চরিত্র সংযোজন।

— Halcyon991

return falseলিঙ্কে কোনও বিন্দু যুক্ত হচ্ছে না, এটি ক্লিকযোগ্য হবে।

— ইপো

Answer 7

সবচেয়ে সহজ সমাধানটি হল এই সিএসএস বাচ্চাদের সাথে যুক্ত করা:

.your-child {
    pointer-events: none;
}

Comments

ওয়ার্ডপ্রেস দ্বারা যুক্ত অযাচিত ফন্ট ট্যাগের জন্য আমার এটি দরকার ছিল এবং এটি আমার জন্য কাজ করেছে

— Ndm Gjr

Answer 8

এটি করার আরও একটি ছোট উপায়:

$('.header').on('click', function () {
    $(this).children('a').on('click', function(e) {
        e.stopPropagation();
        $(this).siblings('.children').toggle();
    });
});

Comments

কিন্তু ... শিরোনাম ক্লিক করার সময় এটি কিছুই করে না।

— লিওরা হায়ডন্ট

প্রতিবার আপনি শিরোনাম ক্লিক করলে, এটি বাচ্চাদের ('এ') এ একটি নতুন ক্লিক ইভেন্ট যুক্ত করে।

— ফ্র্যাঙ্ক ফোর্ট 15