বাচ্চাদের নয়, প্যারেন্ট ডিআইভিতে কেবলমাত্র ইভেন্ট ক্লিক করার কীভাবে?

Question

আমার একটি সংঘর্ষযুক্ত একটি ডিআইভি foobarএবং that ডিআইভির ভিতরে কয়েকটি ডিআইভি রয়েছে যেগুলি অনাবৃত, তবে আমি মনে করি তারা foobarশ্রেণিটি উত্তরাধিকারসূত্রে নিচ্ছে :

$('.foobar').on('click', function() { /*...do stuff...*/ });

আমি এটি কেবল ডিআইভিতে কোথাও ক্লিক করলেই বাচ্চাদের ডিআইভিতে ক্লিক করে গুলি ছড়িয়ে দিতে চাই।

Answer 1

যদি e.targetএকই উপাদানটি হয় তবে thisআপনি কোনও বংশধরকে ক্লিক করেন নি।

$('.foobar').on('click', function(e) {
  if (e.target !== this)
    return;
  
  alert( 'clicked the foobar' );
});

.foobar {
  padding: 20px; background: yellow;
}
span {
  background: blue; color: white; padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='foobar'> .foobar (alert) 
  <span>child (no alert)</span>
</div>

Comments

এই উত্তরটি এই মন্তব্যটির ব্যাখ্যা দেয়

— gdoron মনিকা 24

@ জিডোরন: আদম খুব দয়ালু হচ্ছে। :)

হাই @ ভিকি শুধু এফওয়াইআই, জাভাস্ক্রিপ্টের দুটি ভিন্ন ধরণের মান সমতার তুলনা রয়েছে। ===বা !==ব্যবহারের "কঠোর সমতা তুলনা অ্যালগরিদম" , যখন ==এবং !=ব্যবহারসমূহ "সারাংশ সমতা তুলনা অ্যালগরিদম" , যা টাইপ দমনমূলক হয়। সাধারণ জ্ঞান সবসময় ব্যবহার করা কঠোর যদি না আছে দমনমূলক টাইপ জন্য নির্দিষ্ট প্রয়োজনীয়তা তুলনা (যেহেতু তার নিয়ম একটু জটিল) । এই ক্ষেত্রে, কারণগুলির সাথে বস্তুর তুলনা করা হচ্ছে, এটি সত্যই কোনও পার্থক্য করে না তবে আপনি দেখতে পাবেন যে বেশিরভাগ লোক এখনও কঠোর তুলনা করেই চলবে ।

@ ভিকি: ঠিক আছে। এটি এখনও সঠিক। কেবল আপনাকে জেএসের বিভিন্ন অপারেটর থাকতে দেওয়া। ;-)

এটি একটি ভাল উত্তর কারণ এটি ভ্যানিলা জেএস অ্যাডএভেন্টলিস্টেনারের সাথেও কাজ করতে পারে এবং jQuery নির্দিষ্ট নয়।

— মাইকেল জিওভান্নি পুমো

Answer 2

আপনি কেবল নতুন ব্রাউজারগুলিকে লক্ষ্য করে আপত্তি না করলে আরও একটি উপায় কাজ করে। কেবল সিএসএস যুক্ত করুন

pointer-events: none;

ডিভের যে কোনও শিশুকে আপনি ক্লিকটি ক্যাপচার করতে চান। এখানে সমর্থন সারণী রয়েছে

http://caniuse.com/#feat=pointer-events

Comments

জেনে রাখুন যে 'ধন্যবাদ' মন্তব্যগুলি আমার লেখা এড়ানো উচিত, তবে আমি আপনাকে এর জন্য পায়ে চুমু খেতে পারি :-)

— সিমোনা আদ্রিয়ানী

@ সিমোনা আদ্রানী হাহ?

— n3wb

ধন্যবাদ, আমিও একইভাবে করেছি, তবে আমি এর আশেপাশে ইউনিট পরীক্ষার মামলা লেখার জন্য সংগ্রাম করছি। আমি কীভাবে নিশ্চিত করতে পারি যে clickপ্রোগ্রাম্যাটিক ক্লিক ইভেন্ট ট্রিগারটি ব্লক করা উচিত?

— পঙ্কজ পার্কার

Answer 3

আপনি আপনার পক্ষে বুদবুদ ব্যবহার করতে পারেন:

$('.foobar').on('click', function(e) {
    // do your thing.
}).on('click', 'div', function(e) {
    // clicked on descendant div
    e.stopPropagation();
});

Comments

এটি আমার নির্দিষ্ট দৃশ্যের জন্য দুর্দান্ত সমাধানের মতো দেখায়, কারণ আমি কেবল বংশজাত <a>উপাদানগুলিতে ক্লিকগুলি বাদ দিতে চাই । একটি মাত্র সমস্যা আছে: আমি যখন তাদের মাঝখানে ক্লিক করি তখনই ঘটনাটি ট্রিগার হয় (গুগল ক্রোমে পরীক্ষিত)। এরও কোনও রূপ আছে যা এটিকে বাধা দেয়?

— cgogolin

@ ক্যাগোগলিন, এটি একবার দেখুন: stackoverflow.com/questions/12197122/…

— জেসিকা

Answer 4

আমি কাজের গ্রহণযোগ্য উত্তর পাইনি, তবে এটি কৌশলটি মনে হচ্ছে, কমপক্ষে ভ্যানিলা জেএস-এ।

if(e.target !== e.currentTarget) return;

Comments

ই-কর্নার টার্গেট রেফারেন্সিংয়ের চেয়ে বেশি নির্ভুল thisকারণ কারণ যে জিনিসটি thisনির্দেশ করছে সে স্থান এবং প্রেক্ষাপটের উপর নির্ভর করে যেখান থেকে ডাকা যায় তা বদলে যেতে পারে

— ইবলিসেস্ট

Answer 5

//bind `click` event handler to the `.foobar` element(s) to do work,
//then find the children of all the `.foobar` element(s)
//and bind a `click` event handler to them that stops the propagation of the event
$('.foobar').on('click', function () { ... }).children().on('click', function (event) {
    event.stopPropagation();
    //you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler)
});

এটি clickউপাদান (গুলি) এর যে কোনও শিশু উপাদান (গুলি) এর উপর ইভেন্টটির প্রচার (বুদবুদ) বন্ধ করবে .foobarযাতে ইভেন্টটি পৌঁছায় না.foobar তাদের ইভেন্ট হ্যান্ডলার (গুলি) গুলি ।

এখানে একটি ডেমো: http://jsfiddle.net/bQQJP/

Answer 6

$(".advanced ul li").live('click',function(e){
    if(e.target != this) return;
    //code
    // this code will execute only when you click to li and not to a child
})

Answer 7

আমার একই সমস্যা ছিল এবং এই সমাধানটি নিয়ে এসেছি (অন্যান্য উত্তরের উপর ভিত্তি করে)

 $( ".newsletter_background" ).click(function(e) {
    if (e.target == this) {
        $(".newsletter_background").hide();
    } 
});

মূলত এটি বলে যদি লক্ষ্যটি ডিভ হয় তবে কোডটি চালান অন্যথায় কিছুই করবেন না (এটি আড়াল করবেন না)

Answer 8

আমার foobarকেসটি একই রকম তবে এটি উপলক্ষ যখন আপনার কয়েকটি-থাকে এবং আপনি কেবল একটি প্রতি বন্ধ করতে চান - প্রতি ক্লিকে:

পিতামাতার কেস সন্ধান করুন

$(".foobar-close-button-class").on("click", function () {
    $(this).parents('.foobar').fadeOut( 100 );
    // 'this' - means that you finding some parent class from '.foobar-close-button-class'
    // '.parents' -means that you finding parent class with name '.foobar'
});

সন্তানের ক্ষেত্রে সন্ধান করুন

$(".foobar-close-button-class").on("click", function () {
    $(this).child('.foobar-close-button-child-class').fadeOut( 100 );
    // 'this' - means that you finding some child class from '.foobar-close-button-class'
    // '.child' -means that you finding child class with name '.foobar-close-button-child-class'
});

Answer 9

আপনি ইভেন্ট কনটেন্টার টার্গেট ব্যবহার করতে পারেন। এটি ইভেন্টটি ক্লিক করে এমন একাদশিকে ক্লিক করবে।

target = e => {
    console.log(e.currentTarget);
  };

<ul onClick={target} className="folder">
      <li>
        <p>
          <i className="fas fa-folder" />
        </p>
      </li>
    </ul>

Answer 10

আপনি যদি pointer-events: none;আধুনিক ব্রাউজারগুলি ব্যবহার করতে না পারছেন এবং লক্ষ্য করে নিচ্ছেন তবে আপনি composedPathএই জাতীয় বস্তুর উপর সরাসরি ক্লিক সনাক্ত করতে ব্যবহার করতে পারেন:

element.addEventListener("click", function (ev) {
    if (ev.composedPath()[0] === this) {
        // your code here ...
    }
})

আপনি এখানে রচিতপথ সম্পর্কে আরও পড়তে পারেন: https://developer.mozilla.org/en-US/docs/Web/API/Event/compusedPath

Answer 11

// if its li get value 
document.getElementById('li').addEventListener("click", function(e) {
                if (e.target == this) {
                    UodateNote(e.target.id);
                }
                })
                
                
                function UodateNote(e) {

    let nt_id = document.createElement("div");
    // append container to duc.
    document.body.appendChild(nt_id);
    nt_id.id = "hi";
    // get conatiner value . 
    nt_id.innerHTML = e;
    // body...
    console.log(e);

}

li{
 cursor: pointer;
    font-weight: bold;
  font-size: 20px;
    position: relative;
    width: 380px;
    height: 80px;
    background-color: silver;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 0.5cm;
    border: 2px solid purple;
    border-radius: 12%;}
    
    p{
     cursor: text;
  font-size: 16px;
   font-weight: normal;
    display: block;
    max-width: 370px;
    max-height: 40px;
    overflow-x: hidden;}

<li id="li"><p>hi</p></li>