web-dev-qa-db-ja.com

（ドキュメント全体で）要素をクリックする方法は？

クリックしたHTMLドキュメントの現在の要素（要素が何であれ）を取得したい。使ってます：

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

しかし、非常に奇妙なことに、クリックされた要素ではなく、ドキュメント全体のテキストを取得します。

クリックした要素のみを取得する方法は？

例

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

「テスト」テキストをクリックすると、jQueryの$(this).attr("myclass"）で属性を読み取れるようになります。

javascriptjqueryhtmldom
110
user1145216

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

また、attachEvent()の代わりにaddEventListener()を使用する<IE9をサポートする必要があるかどうかを確認してください。

190
alex

bodyタグ内で次を使用します

<body onclick="theFunction(event)">

次に、javascriptで次の関数を使用してIDを取得します

<script>
function theFunction(e)
{ alert(e.target.id);}
16
Malek Tubaisaht
window.onclick = e => {
    console.log(e.target);
    console.log(e.target.tagName);
}

クリックされた要素からテキストを取得する

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

ターゲット要素は event.target で見つけることができます：

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

参照：

5
PPvG

delegate および event.target を使用します。 delegateは、1つの要素が子要素のイベントをリッスンして処理できるようにすることで、イベントバブリングを利用します。 targetは、eventオブジェクトのjQ正規化プロパティで、イベントの発生元のオブジェクトを表します。

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

デモ： http://jsfiddle.net/xXTbP/

3
JAAulde
$(document).click(function (e) {
    alert($(e.target).text());
});
0
user1170406