Bagaimana cara elemen diklik (untuk seluruh dokumen)?

150

Saya ingin mendapatkan elemen saat ini (elemen apa pun itu) dalam dokumen HTML yang saya klik. Saya menggunakan:

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

Tapi sangat aneh, saya mendapatkan teks dari seluruh dokumen (!), Bukan elemen yang diklik.

Bagaimana cara mendapatkan hanya elemen yang saya klik?

Contoh

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

Jika saya mengklik teks "test", saya ingin dapat membaca atribut dengan $(this).attr("myclass") di jQuery.

javascript jquery html dom pengguna1145216
sumber
2
Fungsi handler dieksekusi dalam lingkup elemen yang ditambahkan, di sini dokumen. Anda harus mendapatkan targetproperti dari objek acara.
Bergi

Jawaban:

238

Anda perlu menggunakan event.targetelemen mana yang awalnya memicu acara. Dalam thiscontoh kode Anda merujuk document.

Di jQuery, itu ...

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

Tanpa jQuery ...

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

Juga, pastikan jika Anda perlu untuk dukungan <IE9 yang Anda gunakan attachEvent()bukan addEventListener().

alex
sumber
1
Saya menemukan bahwa elemen yang kembali sedikit berbeda, jadi saya tidak bisa melakukan if(event.target === myjQueryDivElement)apa yang harus saya lakukan: di if(event.target.hasClass('mydivclass'))mana kelas saya adalah kelas yang dimiliki elemen saya.
redfox05
Saya telah mencari pekerjaan di Safari selama 3 hari dan saya akhirnya menemukan posting ini. Kalian benar-benar berterima kasih
Raymond Feliciano
3
@ alex, hei, seharusnya || target.innerText?
Jevgeni Smirnov
30

event.target untuk mendapatkan element

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

untuk mendapatkan teks dari elemen yang diklik

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

gunakan yang berikut di dalam tag tubuh

<body onclick="theFunction(event)">

kemudian gunakan di javascript fungsi berikut untuk mendapatkan ID

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

Malek Tubaisaht
sumber
3

Gunakan delegatedan event.target. delegatemengambil keuntungan dari peristiwa yang menggelegak dengan membiarkan satu elemen mendengarkan, dan menangani, peristiwa pada elemen anak. targetadalah properti dinormalisasi jQ dari eventobjek yang mewakili objek dari mana peristiwa itu berasal.

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

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

JAAulde
sumber
2
Harus disebutkan di hari ini dan usia yang on()harus direkomendasikan delegate(). Juga, documentmungkin satu-satunya pengecualian untuk tidak menggunakan delegate()/ on()karena mereka menggelegak ke titik penanganan tertinggi.
alex
Panggilan yang bagus. Kami tidak meningkatkan ke jQuery terbaru di pekerjaan saya, jadi ontergelincir di pikiran saya.
JAAulde
1
@ alex, karena bagaimanapun kejadiannya menggelegak, dan karena pawang harus berjalan terlepas, itu tidak benar-benar pengecualian bukan? Hanya saja, tidak berbeda sama sekali. Saya kira delegatememang ada overhead penyaringan untuk dipertimbangkan, ...
JAAulde
2

Saya tahu posting ini benar-benar tua tetapi, untuk mendapatkan konten suatu elemen dalam referensi ID-nya, inilah yang akan saya lakukan:

window.onclick = e => {
    console.log(e.target);
    console.log(e.target.id, ' -->', e.target.innerHTML);
}
Aft3rL1f3
sumber
1 
$(document).click(function (e) {
    alert($(e.target).text());
});

sumber
-2

Berikut adalah solusi yang menggunakan pemilih jQuery sehingga Anda dapat dengan mudah menargetkan tag dari kelas, ID, jenis apa pun.

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
sumber