আপনি ইভেন্ট.টারাগেট ব্যবহার করে কোনও উপাদানগুলির পিতৃ উপাদানকে লক্ষ্য করতে পারেন?

Question

আমি যে পৃষ্ঠায় ক্লিক করছি সেটির অভ্যন্তরীণ এইচটিএমএল হওয়ার জন্য আমার পৃষ্ঠার অন্তর্নিহিত এইচটিএমএলকে পরিবর্তন করার চেষ্টা করছি, একমাত্র সমস্যা হ'ল আমি চাই যে এটি সম্পূর্ণ উপাদানটি গ্রহণ করে যেমন:

<section class="homeItem" data-detail="{"ID":"8","Name":"MacBook Air","Description":"2015 MacBook A…"20","Price":"899","Photo":"Images/Products/macbookAir.png"}"></section>

আমি জাভাস্ক্রিপ্টে যে কোডটি লিখেছি তা হ'ল:

function selectedProduct(event){
  target = event.target;
  element = document.getElementById("test");
  element.innerHTML = target.innerHTML;
}

আমি ক্লিক করেছি সেই নির্দিষ্ট উপাদানটিকে টার্গেট করবে।

আমি যেটি অর্জন করতে চাই তা হ'ল আমি যখন <section>উপাদানটির যে কোনও জায়গায় ক্লিক করি, এটি যে ক্লিক করেছে তার চেয়ে সম্পূর্ণ উপাদানটির অভ্যন্তরীণ এইচটিএমএল গ্রহণ করবে।

আমি অনুমান করব যে ক্লিক করা হয়েছে তার মূল উপাদান নির্বাচন করে এটি করা কিছু তবে আমি নিশ্চিত নই এবং অনলাইনে কিছুই খুঁজে পাচ্ছি না।

সম্ভব হলে আমি JQuery থেকে দূরে থাকতে চাই

Answer 1

আমার মনে হয় আপনার যা প্রয়োজন তা হ'ল ব্যবহার করা event.currentTarget। এটিতে এমন উপাদান থাকবে যা প্রকৃতপক্ষে ইভেন্ট শ্রোতা রয়েছে। সুতরাং <section>পুরোটিতে ইভেন্টলিস্টার event.targetযদি ক্লিক করা উপাদান <section>হবে তবে তা হবে event.currentTarget।

অন্যথায় parentNodeআপনি যা খুঁজছেন তা হতে পারে।

প্যারেন্টনোডে বর্তমানের টার্গেটের
লিঙ্ক

Comments

আমি যা চেয়েছিলাম ঠিক তাই করেছে, ধন্যবাদ! টাইমার শেষ হয়ে গেলে আমি উত্তরটি গ্রহণ করব।

— অ্যাডাম

আমার দিনটি বাঁচিয়েছে !, ইভেন্ট.আরগারেটটি মাউসের সবচেয়ে ছোট ট্যাগ, ইভেন্ট ক্রন্টের টার্গেটটি হ'ল ইভেন্টটি

— ট্রিগারযুক্ত

পাল্টা স্বজ্ঞাত মনে হয়। আমি মনে করি currentTargetক্লিক করা উপাদানটির প্রতিনিধিত্ব করা উচিত, এবং targetইভেন্টটি কী সেট করা হয়েছিল তা হওয়া উচিত।

— র্যান্ডাল কোডিং

এটি আমি যা চেয়েছিলাম ঠিক সেটাই ছিল, প্রথমে আপনাকে ধন্যবাদ, তবে আমার একটি প্রশ্ন রয়েছে, যখন আমি আমার ফাংশনটিতে ইভেন্ট অবজেক্টটি লগ করি তখন কারেন্টট্রেটটি বাতিল হয় তবে আমি আমার ডেটাসেট বৈশিষ্ট্যটি থেকে আইডি পেতে সক্ষম হয়েছি, এটি লগ ইন ইভেন্ট এখনও একই e.target হয়?

— a_m_dev

Answer 2

কোনও উপাদানটির পিতামাতাকে ব্যবহার করতে parentElement:

function selectedProduct(event){
  var target = event.target;
  var parent = target.parentElement;//parent of "target"
}

Comments

যদিও এটি ওপির প্রশ্নের উত্তর দেয়, আমি মনে করি ওপির সমস্যাটি সমাধান করা উচিত currentTarget।

— donnywals

এটি আমাকে শীর্ষ স্তরের অভিভাবক উপাদানটি দিয়েছে যা আমি যা খুঁজছিলাম তা নয়, যাইহোক আপনাকে ধন্যবাদ আমি আমার ভবিষ্যতের কোডিংয়ের জন্য এটি মনে রাখব

— অ্যাডাম

Answer 3

function getParent(event)
{
   return event.target.parentNode;
}

উদাহরণস্বরূপ: ১. document.body.addEventListener("click", getParent, false);আপনি যে ক্লিক করেছেন বর্তমান উপাদানটির পিতামত্তা উপাদানটি প্রদান করে।

2. আপনি যদি কোনও ফাংশনের ভিতরে ব্যবহার করতে চান তবে আপনার ইভেন্টটি পাস করুন এবং ফাংশনটিকে এভাবে কল করুন: function yourFunction(event){ var parentElement = getParent(event); }

Answer 4

handleEvent(e) {
  const parent = e.currentTarget.parentNode;
}

Answer 5

$(document).on("click", function(event){
   var a = $(event.target).parents();
   var flaghide = true;
    a.each(function(index, val){
       if(val == $(container)[0]){
           flaghide = false;
        }
    });
    if(flaghide == true){
        //required code
    }
})

Answer 6

var _RemoveBtn = document.getElementsByClassName("remove");
for(var i=0 ;  i<_RemoveBtn.length ; i++){
    _RemoveBtn[i].addEventListener('click',sample,false);
}
function sample(event){
    console.log(event.currentTarget.parentNode);    
}