যখন কোনও শিশু অ্যাঙ্কর ক্লিক করা হয় তখন আমি পিতামাতার অনক্লিক ইভেন্টটিকে গুলি চালানো থেকে কীভাবে বাধা দেব?

Question

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

এখানে ভাঙা কোডটি:

জাভাস্ক্রিপ্ট

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

এইচটিএমএল

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

Answer 1

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

এর দুটি সমাধান রয়েছে যে ঘটনাটি প্রকৃতপক্ষে কে ঘটেছে তা পরীক্ষা করা। jQuery ইভেন্টের সাথে একটি ইভেন্টগ্রিজ অবজেক্টকেও পাস করে:

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

আপনি নিজের লিঙ্কগুলিতে একটি ইভেন্ট ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারেন যা তাদের নিজস্ব হ্যান্ডলার মৃত্যুদন্ড কার্যকর করার পরে ইভেন্ট বুদবুদ বন্ধ করতে বলে :

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

Comments

দুর্দান্ত উত্তর। অপশন রয়েছে তা জেনে ভাল লাগছে।

— জোনাথন ওয়াটনি

+1 টি! স্টপপ্রোপেশন সহ একটি ক্লিক হ্যান্ডলার সংযুক্ত করা খুব সুন্দর কৌশল, ধন্যবাদ!

— থমাস

আপনার যদি প্রচুর পরিমাণে উপাদানগুলি ছড়িয়ে পড়া প্রতিরোধ করতে চান তবে আপনি তাদের পিতামাতার উপাদান খুঁজে পেতে পারেন এবং সেখানেও মাথা ঘামানো থেকে বিরত রাখতে পারেন। সুতরাং একটি ডিভের সমস্ত লিঙ্ককে বাধা দেওয়ার পরিবর্তে উদাহরণস্বরূপ বলা যাক - কেবল ডিভিতে নিজেই ক্লিকটি বিরতি দিন এবং কোনও উচ্চতর দিকে যাওয়া থেকে বিরত করুন এবং আপনি সেট হয়ে গেছেন।

— ইতিবাচক

সন্তানের if( e.target !== this) return;চেয়ে পিতামাতার মধ্যে ব্যবহার করা ভাল, e.stopPropagation()কারণ আপনি কখনই জানেন না যে অন্য কেউ বাচ্চাদের সাথে কোনও হ্যান্ডলার সংযুক্ত করে কিনা, বা কোনও গ্রন্থাগার অবশ্যই কোনও সন্তানের সাথে কোনও হ্যান্ডলার সংযুক্ত করে (এবং আপনি লাইব্রেরির কোডের সাথে গোলযোগ করতে চান না)। এটি উদ্বেগের আরও ভাল বিচ্ছেদ।

— ইউটিএফ_অর_দেখ

ফেলে if( e.target !== this) return;পিতা বা মাতা মানে চেক যে যদি যে পিতা বা মাতা যে onClick তাদের নিজস্ব হ্যান্ডেলার হবে না অন্যান্য শিশুদের কোন ক্লিক করা হয়, তারপর কিছুই ঘটবে। সুতরাং এটি কোনও পরিস্থিতিতে যেমন আপনার কাছে ক্লিকযোগ্য পিতামাতার ডিভ রয়েছে তার পক্ষে অকেজো। e.stopPropagation()ঠিক আছে কাজ করে।

— derf26

Answer 2

স্টপপ্রোপেশন পদ্ধতি ব্যবহার করুন , একটি উদাহরণ দেখুন:

$("#clickable a").click(function(e) {
   e.stopPropagation();
});

JQuery ডক্স দ্বারা বলা হয়েছে:

stopPropagation পদ্ধতিটি কোনও ঘটনাকে অবহিত করা থেকে কোনও পিতামাত্ত হ্যান্ডলারকে বাধা দেয় এবং ডিওএম ট্রিটিকে বুদ্বুদ করতে বাধা দেয়।

মনে রাখবেন যে এটি অন্য শ্রোতাদের এই ইভেন্টটি পরিচালনা করতে বাধা দেয় না (উদাহরণস্বরূপ, একটি বোতামের জন্য একাধিক ক্লিক হ্যান্ডলার), যদি এটি পছন্দসই প্রভাব না হয় তবে আপনাকে অবশ্যই এর stopImmediatePropagationপরিবর্তে ব্যবহার করতে হবে।

Answer 3

একটি নন-জিক্যুরি কোড (খাঁটি জাভাস্ক্রিপ্ট) সন্ধানের জন্য সকলের জন্য আমার এখানে সমাধান

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});

আপনার কোডটি পিতামাতার বাচ্চাদের ক্লিক করা হলে কার্যকর করা হবে না uted

Comments

এটি আমার পক্ষে কাজ করেছে, আমার একটি জেএস / জিকুয়েরিবিহীন সমাধান প্রয়োজন। 10x!

— এল

দুর্দান্ত উত্তর। আমি কেবল ইভেন্টটি সরাসরি পাস করেছি। সুতরাং আমি ব্যবহার করি নি window.event, যা এমডিএন নিরুৎসাহিত করে: বিকাশকারী.মোজিলা.আর.ইন.ইউএস / ডকস / ওয়েবে / এপিআই / উইন্ডো / সপ্তাহ । আপনি যদি সময় ব্যয় করতে পারেন তবে আমি কেন তার প্রশংসা করব যদি আপনি মন্তব্য করেন যে আপনি কেন ব্যবহার করেছেন window.event(সম্ভবত এটি এটি এমন একটি সমস্যা যা 2015 সালে বিদ্যমান বা আমি কারণটি বুঝতে ব্যর্থ হয়েছি)।

— আরএমও

Answer 4

আপনি এটি চেষ্টা করতে পারেন

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

Answer 5

যদি আপনি কোনও অবস্থাতেই অভ্যন্তরীণ উপাদান / গুলিগুলির সাথে ইন্টারঅ্যাক্ট করতে চান না, তবে একটি সিএসএস সমাধান আপনার জন্য কার্যকর হতে পারে।

কেবলমাত্র ভিতরের উপাদানটি সেট করুন pointer-events: none

আপনার ক্ষেত্রে:

.clickable > a {
    pointer-events: none;
}

বা সমস্ত অভ্যন্তর উপাদান সাধারণত লক্ষ্য:

.clickable * {
    pointer-events: none;
}

ReactJS এর ​​সাথে বিকাশের সময় এই সহজ হ্যাকটি আমাকে অনেক সময় সাশ্রয় করেছে

ব্রাউজার সমর্থনটি এখানে পাওয়া যাবে: http://caniuse.com/#feat=pointer-events

Answer 6

আপনার যদি ক্লিকযোগ্য ডিভাইসে একাধিক উপাদান থাকে তবে আপনার এটি করা উচিত:

$('#clickable *').click(function(e){ e.stopPropagation(); });

Answer 7

ব্যবহার করে return false;বা e.stopPropogation();পরবর্তী কোডটি কার্যকর করতে দেয় না। এটি নিজেই এই মুহুর্তে প্রবাহ বন্ধ করবে।

Comments

হ্যাঁ, এটি গুরুত্বপূর্ণ myself তবে রেক্সের উপরের উত্তরটি সহায়ক - এটি যে উপাদানটি ক্লিক করা হয়েছিল তা পেতে পারে এবং কিছু ক্ষেত্রে আপনি যে যুক্তিতে থামিয়ে দেওয়ার চেষ্টা করছেন তাতে এটি ব্যবহার করুন। .target.nodeName কী আঘাত পেয়েছিল তার একটি পরিষ্কার ধারণা পেতে সহায়তা করে।

— ওয়াটারকেম্যান

Answer 8

কারও প্রয়োজন হলে লেখা (আমার জন্য কাজ করা):

event.stopImmediatePropagation()

এই সমাধান থেকে ।

Answer 9

ইনলাইন বিকল্প:

<div>
    <!-- Other content. -->
    <a onclick='event.stopPropagation();' href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

Answer 10

কৌণিক 2+ ব্যবহার করে এখানে একটি উদাহরণ দেওয়া আছে

উদাহরণস্বরূপ, আপনি যদি কোনও মডেল উপাদান বন্ধ করতে চান যদি ব্যবহারকারী এটির বাইরে ক্লিক করে:

// Close the modal if the document is clicked.

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
  this.closeModal();
}

// Don't close the modal if the modal itself is clicked.

@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
  event.stopPropagation();
}

Answer 11

আপনাকে ইভেন্টটি পিতামাতার (বিভক্ত) পৌঁছানো থেকে বিরত করতে হবে। সাড়া জাগানো সম্পর্কে অংশ দেখুন এখানে , এবং jQuery-নির্দিষ্ট এপিআই তথ্য এখানে ।

Comments

কুল। ইভেন্ট বুদবুদ সম্পর্কে তথ্যের জন্য ধন্যবাদ।

— জোনাথন ওয়াটনি

Answer 12

var inner = document.querySelector("#inner");
var outer = document.querySelector("#outer");
inner.addEventListener('click',innerFunction);
outer.addEventListener('click',outerFunction);

function innerFunction(event){
  event.stopPropagation();
  console.log("Inner Functiuon");
}

function outerFunction(event){
  console.log("Outer Functiuon");
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pramod Kharade-Event with Outer and Inner Progration</title>
</head>
<body>
<div id="outer" style="width:100px;height:100px;background-color:green;">
  <div id="inner" style="width:35px;height:35px;background-color:yellow;"></div>
</div>
</body>
</html>

Answer 13

অবিচলিত হিসাবে কিছু উপ উপাদান উল্লেখ করতে নীচের উদাহরণ হিসাবে সিএসএস স্তরক্রম লিখুন।

এই উদাহরণে আমি ক্লাসের সাথে একটি টেবিলের ভিতরে টিডির ভিতরে টিডি অভ্যন্তরে যে কোনও উপাদান (*) -এর প্রচার বন্ধ করি stop

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

Answer 14

উপেক্ষা পিতাম () একটি খাঁটি জাভাস্ক্রিপ্ট সমাধান।

এটি মধ্যস্থতাকারী স্তর হিসাবে কাজ করে যা মাউস ক্লিকের স্থানাঙ্কগুলি শিশু উপাদান / গুলি এর স্থানাঙ্কের সাথে তুলনা করে। দুটি কার্যকর বাস্তবায়ন পদক্ষেপ:

1. আপনার পৃষ্ঠাতে উপেক্ষা পিতা () কোডটি রাখুন।

২. পিতামাতার আসল অনক্লিক = "প্যারেন্টইভেন্ট") এর পরিবর্তে; , লিখুন:

onclick="ignoreParent(['parentEvent()', 'child-ID']);"

আপনি ফাংশনে কোনও শিশু উপাদানের আইডি পাস করতে এবং অন্যকে বাদ দিতে পারেন।

যদি আপনি শিশু উপাদানগুলির একটিতে ক্লিক করেন তবে পিতামাতার ইভেন্টটি আগুন দেয় না। যদি আপনি পিতামাতাকে ক্লিক করেন তবে শিশু উপাদানগুলির কোনওটিতে [যুক্তি হিসাবে সরবরাহ করা হয় না], পিতামাতার ইভেন্টটি বরখাস্ত করা হয়।

গিথুব-এ পিতা-মাতার কোডটি উপেক্ষা করুন

Answer 15

এটি যদি ইনলাইন প্রসঙ্গে থাকে তবে এইচটিএমএল এ চেষ্টা করুন:

onclick="functionCall();event.stopPropagation();

Answer 16

প্রতিক্রিয়া ব্যবহার করে কারও কাছে যদি এই সমস্যা দেখা দেয় তবে আমি এটি সমাধান করেছি।

SCSS:

#loginBackdrop {
position: absolute;
width: 100% !important;
height: 100% !important;
top:0px;
left:0px;
z-index: 9; }

#loginFrame {
width: $iFrameWidth;
height: $iFrameHeight;
background-color: $mainColor;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
margin-top: calc(-1 * #{$iFrameHeight} / 2);
margin-left: calc(-1 * #{$iFrameWidth} / 2);
border: solid 1px grey;
border-radius: 20px;
box-shadow: 0px 0px 90px #545454; }

অংশের রেন্ডার ():

render() {
    ...
    return (
        <div id='loginBackdrop' onClick={this.props.closeLogin}>
            <div id='loginFrame' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
             ... [modal content] ...
            </div>
        </div>
    )
}

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

এটি আমার জন্য কৌশলটি করেছে এবং আমি 2 টি সাধারণ ডিভ দিয়ে একটি মডেল প্রভাব তৈরি করতে সক্ষম হয়েছি।

Answer 17

aনিম্নলিখিত হিসাবে যুক্ত করুন :

<a href="http://foo.com" onclick="return false;">....</a>

বা return false;ক্লিক হ্যান্ডলার থেকে #clickableপছন্দ মত:

  $("#clickable").click(function() {
        var url = $("#clickable a").attr("href");
        window.location = url;
        return false;
   });

Answer 18

সমস্ত সমাধান জটিল এবং jscript এর। এখানে সহজতম সংস্করণ:

var IsChildWindow=false;

function ParentClick()
{
    if(IsChildWindow==true)
    {
        IsChildWindow==false;
        return;
    }
    //do ur work here   
}


function ChildClick()
{
    IsChildWindow=true;
    //Do ur work here    
}

Comments

আমার মনে হয় আপনি "আইসচাইল্ড উইন্ডো == মিথ্যা" লাইনে ভুল করেছেন; - এটি কি "ইসচাইল্ড উইন্ডো = মিথ্যা;" হওয়া উচিত নয়?

— আন্দ্রে শোয়েঘোফার

Answer 19

<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a>

Comments

এটি লিঙ্কটি নেভিগেট করতে বাধা দেয়।

— রেক্স এম

হ্যাঁ, বা কি প্রয়োজন হয় না ?. নাকি নেভেগার হওয়া দরকার?

— andres descalzo