要素をクリックする方法(ドキュメント全体)


150

クリックしたHTMLドキュメントの現在の要素(要素は何でも)を取得したいと思います。使ってます:

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

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

クリックした要素のみを取得するにはどうすればよいですか?

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

「テスト」テキストをクリックすると$(this).attr("myclass"、jQuery で)を使用して属性を読み取ることができます。


2
ハンドラー関数は、ハンドラー関数が追加された要素(ここではドキュメント)のスコープで実行されます。targetイベントオブジェクトのプロパティを取得する必要があります。
ベルギ

回答:


238

event.targetイベントをトリガーした元の要素であるwhich を使用する必要があります。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()代わりに使用する<IE9をサポートする必要があるかどうかも確認してくださいaddEventListener()


1
返された要素がどういうわけか少し異なることがわかったので、実行if(event.target === myjQueryDivElement)する必要がありませんif(event.target.hasClass('mydivclass'))でした。mydivclassは、要素が持っていたクラスです。
redfox05 14

私は3日間サファリでの作業を探していましたが、ついにこの投稿に遭遇しました。皆さん
Raymond Feliciano

3
@alexこんにちは|| target.innerText
Jevgeni Smirnov 2018

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

26

bodyタグ内で以下を使用します

<body onclick="theFunction(event)">

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

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



3

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

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

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


2
この日に言及するon()必要があり、推奨される年齢ですdelegate()。また、/ をdocument使用しない唯一の例外は、とにかく処理の最高点までバブリングしているためです。delegate()on()
アレックス

よかった。私は、当日の仕事では最新のjQueryにアップグレードしていないのでon、気になりません。
JAAulde 2012年

1
@alex、とにかくイベントがバブリングしているので、そしてハンドラーは関係なく実行する必要があるので、それは本当に例外ではありませんか?それだけではありません。delegateただし、考慮すべきフィルタリングのオーバーヘッドはあると思います...
JAAulde

2

私はこの投稿が本当に古いことを知っていますが、そのIDを参照して要素のコンテンツを取得するには、次のようにします。

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

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

-2

以下は、jQueryセレクターを使用するソリューションです。これにより、任意のクラス、ID、タイプなどのタグを簡単にターゲティングできます。

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 );
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.