Öğeyi tıklatmak nasıl (tüm belge için)?

150

Tıkladığım bir HTML belgesinde geçerli öğeyi (ne olursa olsun öğe) almak istiyorum. Ben kullanıyorum:

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

Ama çok garip bir şekilde, tıklanan öğenin değil, tüm (!) Belgenin metnini alıyorum.

Yalnızca tıkladığım öğeyi nasıl edinebilirim?

Misal

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

"Test" metnine tıklarsam, $(this).attr("myclass"jQuery'de) ile özniteliği okuyabilirim .

— user1145216
kaynak

2

İşleyici işlevi, belgeye eklendiği öğe kapsamında yürütülür. targetOlay nesnesinin özelliğini almanız gerekir .

— Bergi

238

event.targetEtkinliği başlangıçta tetikleyen öğeyi hangisi kullanmanız gerekir . thisSenin örneğin kodda ifade eder document.

JQuery'de bu ...

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

JQuery olmadan ...

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

Ayrıca, attachEvent()yerine kullandığınız <IE9'u desteklemeniz gerekip gerekmediğinden emin olun addEventListener().

— alex
kaynak

1

Döndürülen öğenin bir şekilde biraz farklı olduğunu gördüm, bu yüzden if(event.target === myjQueryDivElement)yapamadım: if(event.target.hasClass('mydivclass'))mydivclass öğemin sahip olduğu bir sınıftı.

— redfox05

Safari'de 3 gündür bir iş arıyordum ve sonunda bu yazı üzerine tökezledim. Teşekkürler rock

— Raymond Feliciano

3

@alex hey, olmalı || target.innerTextmı?

— Jevgeni Smirnov

30

event.target almak için element

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

Tıklanan öğeden metni almak için

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

— bhv
kaynak

26

gövde etiketinin içinde aşağıdakileri kullanın

<body onclick="theFunction(event)">

sonra javascript kimliğini almak için aşağıdaki işlevi kullanın

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

— Malek Tubaisaht
kaynak

7

Hedef öğeyi şurada bulabilirsiniz event.target:

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

Referanslar:

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

— Peter-Paul van Gemerden
kaynak

3

Kullanım delegateve event.target. delegatebir öğenin alt öğelerdeki olayları dinlemesine ve işlemesine izin vererek olay köpürmesinden yararlanır. olayın kaynağını oluşturan nesneyi temsil eden nesnenin targetjQ normalleştirilmiş özelliğidir event.

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

Demo: http://jsfiddle.net/xXTbP/

— JAAulde
kaynak

2

Bu gün ve çağda belirtilmesi on()gereken yaşta belirtilmelidir delegate(). Ayrıca, documentmuhtemelen kullanmayan tek istisnası delegate()/ on()onlar zaten taşıma yüksek noktasına fokurdayan gibidir.

— alex

İyi karar. Günlük işimde en yeni jQuery'ye geçmedik, bu yüzden onaklımı kaçırıyor.

— JAAulde

1

@alex, olaylar zaten köpürüyor ve işleyici ne olursa olsun çalıştırmak zorunda olduğu için, bu gerçekten bir istisna değil mi? Sadece bu kadar farklı değil. Sanırım delegatefiltreleme yükü dikkate

— alınacak

2

Bu yazının gerçekten eski olduğunu biliyorum, ancak kimliğine referans olarak bir öğenin içeriğini almak için ne yapacağımı:

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

— Aft3rL1f3
kaynak

1

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

-2

Herhangi bir sınıf, kimlik, tür vb. Etiketleri kolayca hedefleyebilmeniz için jQuery seçici kullanan bir çözüm.

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 );
});

— Henry Lockett
kaynak