Как получить элемент нажал (для всего документа)?

150

Я хотел бы получить текущий элемент (какой бы он ни был) в документе HTML, на который я нажал. Я использую:

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

Но очень странно, я получаю текст всего (!) Документа, а не элемент, на который нажали.

Как получить только тот элемент, на который я нажал?

пример

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

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

javascript jquery html dom 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);

Также убедитесь, что вам нужна поддержка <IE9, которую вы используете attachEvent()вместо addEventListener().

Алекс
источник
1
Я обнаружил, что возвращаемый элемент немного отличался, так что я не мог сделать, if(event.target === myjQueryDivElement)я должен был сделать: if(event.target.hasClass('mydivclass'))где mydivclass был классом, который имел мой элемент.
redfox05
Я искал работу в Safari в течение 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

<body onclick="theFunction(event)">

затем используйте в JavaScript следующую функцию, чтобы получить идентификатор

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

Малек Тубайсахт
источник
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я просто забочусь.
Я.А.Ольде
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 );
});
Генри Локетт
источник