क्या आप event.target का उपयोग करते हुए एक तत्व मूल तत्व को लक्षित कर सकते हैं?

Question

जिस तत्व पर मैं क्लिक करता हूं, उसका आंतरिक HTML बनने के लिए मैं अपने पृष्ठ के इनर HTML को बदलने का प्रयास कर रहा हूं, एकमात्र समस्या यह है कि मैं चाहता हूं कि यह संपूर्ण तत्व ले जाए:

<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>तत्व में कहीं भी क्लिक करता हूं, तो मैं जो हासिल करना चाहता हूं , वह यह है कि मैंने जिस विशिष्ट क्लिक पर क्लिक किया है, उसके बजाय पूरे तत्व का आंतरिक HTML लेगा।

मुझे लगता है कि यह उस क्लिक के मूल तत्व को चुनने के साथ कुछ करना है, लेकिन मुझे यकीन नहीं है और ऑनलाइन कुछ भी नहीं मिल सकता है।

यदि संभव हो तो मैं JQuery से दूर रहना चाहूंगा

Answer 1

मुझे लगता है कि आप की जरूरत का उपयोग करने के लिए है event.currentTarget। इसमें वह तत्व होगा जो वास्तव में ईवेंट श्रोता है। तो अगर पूरे <section>के लिए आयोजक event.targetक्लिक किया गया तत्व <section>होगा , तो यह होगा event.currentTarget।

अन्यथा parentNodeवह हो सकता है जो आप ढूंढ रहे हैं।

currentTarget का
लिंक parentNode के लिए लिंक

Comments

यह वही है जो मैं चाहता था, धन्यवाद! एक बार टाइमर उठने पर मैं उत्तर स्वीकार कर लूंगा।

— एडम

मुझे बचाया दिन !, event.target माउस पर सबसे छोटा टैग है, event.currentTarget एक ऐसी घटना है जिसके ट्रिगर होने की घटना है

— datdinhquoc

जवाबी सहज ज्ञान युक्त लगता है। मुझे लगता है कि 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।

— दानवल्स

इसने मुझे शीर्ष स्तर का मूल तत्व दिया जो कि मैं नहीं देख रहा था, धन्यवाद वैसे भी मैं अपने भविष्य के कोडिंग के लिए इसे ध्यान में रखूंगा

— एडम

Answer 3

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

उदाहरण: 1. 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);    
}