Як натиснути елемент (на весь документ)?

150

Я хотів би отримати поточний елемент (будь-який елемент, який є) в HTML-документі, який я натиснув. Я використовую:

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

Але дуже дивно, я отримую текст цілого (!) Документа, а не клацнув елемент.

Як отримати лише той елемент, на який я натиснув?

Приклад

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

Якщо натиснути на "тестовий" текст, я хотів би мати можливість прочитати атрибут з $(this).attr("myclass") у jQuery.

— користувач1145216
джерело

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

Також переконайтесь, що вам потрібно підтримувати <IE9, який ви використовуєте attachEvent()замість addEventListener().

— алекс
джерело

1

Я виявив, що повертаючий елемент якимось чином відрізнявся, тому я не міг цього if(event.target === myjQueryDivElement)робити: if(event.target.hasClass('mydivclass'))де mydivclass був класом, який мав мій елемент.

— redfox05

Я шукав роботи в Сафарі 3 дні, і нарешті натрапив на цю посаду. Хлопці, ви дякуєте

— Раймонд Фелісіано

3

@ Алекс ей, це має бути || 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

<body onclick="theFunction(event)">

потім використовуйте в javascript наступну функцію, щоб отримати ідентифікатор

<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()оскільки вони все-таки кидають у найвищу точку обробки.

— alex

Гарний дзвінок. Ми не перейшли до останнього 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 );
});

— Генрі Локетт
джерело