বাইরের উপাদান (ভ্যানিলা জাভাস্ক্রিপ্ট) ক্লিক করুন সনাক্ত করুন

Question 1

আমি সর্বত্র একটি ভাল সমাধান অনুসন্ধান করেছি, তবুও আমি এমন কোনও সন্ধান করতে পারি না যা jQuery ব্যবহার করে না ।

কোনও ক্রমের ব্রাউজার, সাধারণ উপায় (অদ্ভুত হ্যাক ছাড়া বা কোড ভাঙা সহজ), কোনও উপাদানটির বাইরে ক্লিক (যা বাচ্চা থাকতে পারে বা নাও পারে) সনাক্ত করতে পারে?

Question 2

ইভেন্ট শ্রোতার সাথে যুক্ত করুন documentএবং ইভেন্টটির Node.contains()লক্ষ্য (যা অভ্যন্তরীণ-সর্বাধিক ক্লিক করা উপাদান) আপনার নির্দিষ্ট উপাদানটির মধ্যে রয়েছে কিনা তা অনুসন্ধান করুন। এটি আই 5 তেও কাজ করে

var specifiedElement = document.getElementById('a');

//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);

  if (!isClickInside) {
    //the click was outside the specifiedElement, do something
  }
});

কোড স্নিপেট দেখান

var specifiedElement = document.getElementById('a');

//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);
  if (isClickInside) {
    alert('You clicked inside A')
  } else {
    alert('You clicked outside A')
  }
});

div {
  margin: auto;
  padding: 1em;
  max-width: 6em;
  background: rgba(0, 0, 0, .2);
  text-align: center;
}

Is the click inside A or outside?
<div id="a">A
  <div id="b">B
    <div id="c">C</div>
  </div>
</div>

স্নিপেট প্রসারিত করুন

Question 3

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

জেএসফিডালে উদাহরণটি দেখুন

document.addEventListener("click", function (e) {
  var level = 0;
  for (var element = e.target; element; element = element.parentNode) {
    if (element.id === 'x') {
      document.getElementById("out").innerHTML = (level ? "inner " : "") + "x clicked";
      return;
    }
    level++;
  }
  document.getElementById("out").innerHTML = "not x clicked";
});

সর্বদা হিসাবে, এটি অ্যাডএভেন্টলিস্টনার / সংযুক্তিভেন্টের কারণে ক্রস-খারাপ-ব্রাউজারটি উপযুক্ত নয়, তবে এটি এটির মতো কাজ করে।

কোনও শিশু ক্লিক করা হয়, যখন ইভেন্ট.আরজেট নয়, তবে এর পিতামাতার মধ্যে একটি হ'ল পর্যবেক্ষণকারী উপাদান (আমি কেবল এটির জন্য স্তর গণনা করছি)। আপনার কাছে একটি বুলিয়ান ভারও থাকতে পারে, যদি উপাদানটি পাওয়া যায় বা না পাওয়া যায় তবে ক্লজটির জন্য হ্যান্ডলারটি ভিতরে থেকে ফিরে না আসা return আমার উদাহরণটি সীমাবদ্ধ করে দিচ্ছে যে হ্যান্ডলারটি কেবল শেষ হয়, যখন কিছুই মেলে না।

ক্রস ব্রাউজারের সামঞ্জস্যতা যুক্ত করা হচ্ছে, আমি সাধারণত এটি এরকম করে চলেছি:

var addEvent = function (element, eventName, fn, useCapture) {
  if (element.addEventListener) {
    element.addEventListener(eventName, fn, useCapture);
  }
  else if (element.attachEvent) {
    element.attachEvent(eventName, function (e) {
      fn.apply(element, arguments);
    }, useCapture);
  }
};

এটি ইভেন্ট শোনার / হ্যান্ডলার সংযুক্তকরণের জন্য this, আইই তে অন্তর্ভুক্ত পুনর্লিখন , উপাদান হওয়ার জন্য, যেমন jQuery এর ইভেন্ট হ্যান্ডলারদের জন্য এটি ক্রস ব্রাউজারের সামঞ্জস্যপূর্ণ কোড । JQuery এর কিছু বিট মনে রাখার জন্য প্রচুর যুক্তি রয়েছে;)

Question 4

এটি সম্পর্কে:

jsBin ডেমো

document.onclick = function(event){
  var hasParent = false;
    for(var node = event.target; node != document.body; node = node.parentNode)
    {
      if(node.id == 'div1'){
        hasParent = true;
        break;
      }
    }
  if(hasParent)
    alert('inside');
  else
    alert('outside');
}

Question 5

এর বাইরে ক্লিক করে উপাদানটি আড়াল করতে আমি সাধারণত এ জাতীয় সাধারণ কোড প্রয়োগ করি:

var bodyTag = document.getElementsByTagName('body');
var element = document.getElementById('element'); 
function clickedOrNot(e) {
	if (e.target !== element) {
		// action in the case of click outside 
		bodyTag[0].removeEventListener('click', clickedOrNot, true);
	}	
}
bodyTag[0].addEventListener('click', clickedOrNot, true);

স্নিপেট প্রসারিত করুন

Question 6

এই সমস্যার আর একটি খুব সহজ এবং দ্রুত পদ্ধতির pathশ্রোতার দ্বারা প্রত্যাবর্তিত ইভেন্ট অবজেক্টের অ্যারের ম্যাপ করা। যদি আপনার উপাদানটির নাম idবা classনাম অ্যারেগুলির মধ্যে একটির সাথে মিলে যায় তবে ক্লিকটি আপনার উপাদানটির ভিতরে রয়েছে।

(আপনি যদি উপাদানটি সরাসরি না পেতে চান তবে এই সমাধানটি কার্যকর হতে পারে (যেমন: document.getElementById('...')উদাহরণস্বরূপ, একটি রিঅ্যাক্টজ / নেক্সটজ অ্যাপ্লিকেশনে, এসএসআর ..))।

এখানে একটি উদাহরণ:

   document.addEventListener('click', e => {
      let clickedOutside = true;

      e.path.forEach(item => {
        if (!clickedOutside)
          return;

        if (item.className === 'your-element-class')
          clickedOutside = false;
      });

      if (clickedOutside)
        // Make an action if it's clicked outside..
    });

আমি আশা করি এই উত্তরটি আপনাকে সাহায্য করবে! (আমার সমাধানটি যদি ভাল সমাধান না হয় বা আপনি যদি কিছু উন্নতি করতে দেখেন তবে আমাকে জানান))

Question 7

আমি আরও একটি ভাল পদ্ধতি খুঁজে পেতে এটি নিয়ে প্রচুর গবেষণা করেছি। জাভাস্ক্রিপ্ট পদ্ধতি। এটিতে লক্ষ্য রয়েছে কিনা তা যাচাই করতে DOM এ পুনরাবৃত্তভাবে যায়। আমি এটিকে একটি প্রতিক্রিয়া প্রকল্পে ব্যবহার করেছি তবে যখন সেট স্থিতিতে DOM পরিবর্তনের প্রতিক্রিয়া দেখায় তখন। নিয়ন্ত্রণ ব্যবস্থা কার্যকর হয় না। তাই আমি এই সমাধানটি নিয়ে এসেছি

//Basic Html snippet
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="mydiv">
  <h2>
    click outside this div to test
  </h2>
  Check click outside 
</div>
</body>
</html>


//Implementation in Vanilla javaScript
const node = document.getElementById('mydiv')
//minor css to make div more obvious
node.style.width = '300px'
node.style.height = '100px'
node.style.background = 'red'

let isCursorInside = false

//Attach mouseover event listener and update in variable
node.addEventListener('mouseover', function() {
  isCursorInside = true
  console.log('cursor inside')
})

/Attach mouseout event listener and update in variable
node.addEventListener('mouseout', function() {
    isCursorInside = false
  console.log('cursor outside')
})


document.addEventListener('click', function() {
  //And if isCursorInside = false it means cursor is outside 
    if(!isCursorInside) {
    alert('Outside div click detected')
  }
})

ওয়ার্কিং ডেমো জেসফিডাল