Làm thế nào để có được phần tử được nhấp (cho toàn bộ tài liệu)?

149

Tôi muốn lấy phần tử hiện tại (bất kể phần tử nào) trong tài liệu HTML mà tôi đã nhấp. Tôi đang dùng:

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

Nhưng rất lạ, tôi nhận được văn bản của toàn bộ tài liệu (!) Chứ không phải phần tử được nhấp.

Làm thế nào để chỉ lấy phần tử tôi nhấp vào?

Thí dụ

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

Nếu tôi nhấp vào văn bản "kiểm tra", tôi muốn có thể đọc thuộc tính với $(this).attr("myclass") trong jQuery.

— người dùng1145216
nguồn

2

Hàm xử lý thực thi trong phạm vi của phần tử được thêm vào, ở đây là tài liệu. Bạn sẽ cần phải có được targettài sản của đối tượng sự kiện.

— Bergi

237

Bạn cần sử dụng event.targetyếu tố ban đầu kích hoạt sự kiện. Các thistrong mã ví dụ của bạn đề cập đến document.

Trong jQuery, đó là ...

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

Không có jQuery ...

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

Ngoài ra, đảm bảo nếu bạn cần hỗ trợ <IE9 mà bạn sử dụng attachEvent()thay vì addEventListener().

— alex
nguồn

1

Tôi thấy rằng phần tử được trả về hơi khác nhau bằng cách nào đó, vì vậy tôi không thể làm if(event.target === myjQueryDivElement)được: if(event.target.hasClass('mydivclass'))trong đó mydiv class là một lớp mà phần tử của tôi có.

— redfox05

Tôi đã tìm kiếm một công việc trong Safari trong 3 ngày và cuối cùng tôi cũng tình cờ thấy bài đăng này. Các bạn cảm ơn rock

— Raymond Feliciano

3

@alex này, có nên || target.innerTextkhông?

— Jevgeni Smirnov

30

event.target để có được element

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

để lấy văn bản từ phần tử được nhấp

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

— bhv
nguồn

26

sử dụng như sau trong thẻ body

<body onclick="theFunction(event)">

sau đó sử dụng trong javascript chức năng sau để lấy ID

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

— Namk Tubaisaht
nguồn

7

Bạn có thể tìm thấy phần tử đích trong event.target:

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

Người giới thiệu:

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

— Peter-Paul van Gemerden
nguồn

3

Sử dụng delegatevà event.target. delegatetận dụng sự kiện sủi bọt bằng cách để một yếu tố lắng nghe và xử lý các sự kiện trên các yếu tố con. targetlà thuộc tính chuẩn hóa jQ của eventđối tượng đại diện cho đối tượng mà sự kiện bắt nguồn.

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

Bản trình diễn: http://jsfiddle.net/xXTbP/

— JAAulde
nguồn

2

Nên được đề cập trong ngày này và tuổi on()nên được đề nghị hơn delegate(). Ngoài ra, documentcó lẽ là ngoại lệ duy nhất để không sử dụng delegate()/ on()vì dù sao họ cũng đang sủi bọt đến điểm xử lý cao nhất.

— alex

Cuộc gọi tốt Chúng tôi đã không nâng cấp lên jQuery gần đây nhất trong công việc hàng ngày của tôi, vì vậy ontôi rất suy nghĩ.

— JAAulde

1

@alex, vì dù sao các sự kiện đang sôi sục, và vì trình xử lý phải chạy bất kể, nó không thực sự là một ngoại lệ phải không? Nó không khác biệt lắm đâu. Tôi đoán delegatekhông có chi phí lọc để xem xét, mặc dù ...

— JAAulde

2

Tôi biết bài đăng này thực sự cũ nhưng, để có được nội dung của một yếu tố liên quan đến ID của nó, đây là điều tôi sẽ làm:

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

— Aft3rL1f3
nguồn

1

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

-2

Đây là một giải pháp sử dụng bộ chọn jQuery để bạn có thể dễ dàng nhắm mục tiêu các thẻ của bất kỳ lớp, ID, loại, v.v.

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
nguồn