तत्व को कैसे क्लिक किया जाए (पूरे दस्तावेज़ के लिए)?

150

मैं एक HTML दस्तावेज़ में वर्तमान तत्व (जो भी तत्व है) प्राप्त करना चाहता हूं। मै इस्तेमाल कर रहा हूँ:

$(document).click(function () {
    alert($(this).text());
});

लेकिन बहुत अजीब बात है, मुझे संपूर्ण (!) दस्तावेज़ का पाठ मिलता है, क्लिक किए गए तत्व का नहीं।

केवल उस तत्व को कैसे प्राप्त करूं जिस पर मैंने क्लिक किया था?

उदाहरण

<body>
    <div class="myclass">test</div>
    <p>asdfasfasf</p>
</body>

यदि मैं "परीक्षण" पाठ पर क्लिक करता हूं, तो मैं $(this).attr("myclass"jQuery में) के साथ विशेषता को पढ़ने में सक्षम होना चाहूंगा ।

— user1145216
स्रोत

2

हैंडलर फ़ंक्शन उस तत्व के दायरे में निष्पादित होता है जिसे यहां जोड़ा जाता है, यहां दस्तावेज़। आपको targetइवेंट ऑब्जेक्ट की संपत्ति प्राप्त करने की आवश्यकता होगी ।

— बरगी

238

आपको event.targetउस तत्व का उपयोग करने की आवश्यकता है जो मूल रूप से घटना को ट्रिगर करता है। thisअपने उदाहरण कोड में को संदर्भित करता है document।

JQuery में, यह ...

$(document).click(function(event) {
    var text = $(event.target).text();
});

बिना jQuery के ...

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        text = target.textContent || target.innerText;   
}, false);

इसके अलावा, यह सुनिश्चित करें कि आपको attachEvent()इसके बजाय उपयोग करने की आवश्यकता है <IE9 addEventListener()।

— एलेक्स
स्रोत

1

मैंने पाया कि जो तत्व वापस आ गया था वह किसी तरह थोड़ा अलग था, इसलिए मैं ऐसा if(event.target === myjQueryDivElement)कर सकता था: if(event.target.hasClass('mydivclass'))जहाँ mydivclass एक वर्ग था जो मेरा तत्व था।

— redfox05

मैं 3 दिनों के लिए सफारी में एक काम की तलाश में था और मैं आखिरकार इस पद पर ठोकर खाई। आप लोग धन्यवाद करते हैं

— रेमंड फेलिसियानो

3

@alex हे, यह होना चाहिए || target.innerText?

— जेवगेनी स्मिरनोव

30

event.target पाने के लिए element

window.onclick = e => {
    console.log(e.target);  // to get the element
    console.log(e.target.tagName);  // to get the element tag name alone
}

क्लिक किए गए तत्व से पाठ प्राप्त करने के लिए

window.onclick = e => {
    console.log(e.target.innerText);
}

— BHV
स्रोत

26

बॉडी टैग के अंदर निम्नलिखित का उपयोग करें

<body onclick="theFunction(event)">

फिर आईडी प्राप्त करने के लिए निम्नलिखित फ़ंक्शन को जावास्क्रिप्ट में उपयोग करें

<script>
function theFunction(e)
{ alert(e.target.id);}

— मािलक तुबसाहट
स्रोत

7

आप में लक्ष्य तत्व पा सकते हैं event.target:

$(document).click(function(event) {
    console.log($(event.target).text());
});

संदर्भ:

http://api.jquery.com/event.target/

— पीटर-पॉल वैन जेमरडेन
स्रोत

3

का उपयोग करें delegateऔर event.target। delegateएक तत्व को सुनने के लिए और बच्चे के तत्वों पर घटनाओं को संभालने के द्वारा घटना बुदबुदाहट का लाभ उठाता है। ऑब्जेक्ट का प्रतिनिधित्व करने वाली वस्तु targetका jQ- सामान्यीकृत गुण है eventजिससे घटना उत्पन्न हुई।

$(document).delegate('*', 'click', function (event) {
    // event.target is the element
    // $(event.target).text() gets its text
});

डेमो: http://jsfiddle.net/xXTbP/

— JAAulde
स्रोत

2

इस दिन और उम्र का उल्लेख किया on()जाना चाहिए जिसे खत्म करने की सिफारिश की जानी चाहिए delegate()। इसके अलावा, documentशायद उपयोग न करने का एकमात्र अपवाद delegate()/ on()जैसा कि वे वैसे भी निपटने के उच्चतम बिंदु पर बुदबुदा रहे हैं।

— एलेक्स

अच्छा निर्णय। हमने अपने दिन के काम में सबसे हाल के jQuery में अपग्रेड नहीं किया है, इसलिए onमेरा दिमाग फिसल गया है।

— JAAulde

1

@alex, चूंकि घटनाएँ वैसे भी बुदबुदाती हैं, और चूँकि हैंडलर को परवाह किए बिना दौड़ना पड़ता है, यह वास्तव में अपवाद नहीं है? यह सिर्फ इतना ही नहीं है कि सभी अलग हैं। मुझे लगता delegateहै कि फ़िल्टरिंग ओवरहेड पर विचार करना है, हालांकि ...

— JAAulde

2

मुझे पता है कि यह पोस्ट वास्तव में पुरानी है, लेकिन इसकी आईडी के संदर्भ में एक तत्व की सामग्री प्राप्त करने के लिए, यह मैं क्या करूंगा:

window.onclick = e => {
    console.log(e.target);
    console.log(e.target.id, ' -->', e.target.innerHTML);
}

— Aft3rL1f3
स्रोत

1

$(document).click(function (e) {
    alert($(e.target).text());
});

-2

यहां एक समाधान है जो एक jQuery चयनकर्ता का उपयोग करता है ताकि आप किसी भी वर्ग, आईडी, प्रकार आदि के टैग को आसानी से लक्षित कर सकें।

jQuery('div').on('click', function(){
    var node = jQuery(this).get(0);
    var range = document.createRange();
    range.selectNodeContents( node );
    window.getSelection().removeAllRanges();
    window.getSelection().addRange( range );
});

— हेनरी लॉकेट
स्रोत