jquery - jquery を使用して DOM 要素を検出する

Question

Firebug のようにクリックした DOM 要素を検出したい。これまでのところ、Google は削除された DOM 要素の検出に関する結果しか出ていません。

jQueryで可能か教えてください。そうでない場合は、目標を達成するために使用できるサードパーティのツール/ライブラリを教えてください。

Answer 1

以下を使用して、BODY タグ内のすべてのタグを取得できます (これは、リスナーをバインドして、マウスオーバー、マウスアウトで境界線を変更し、クリック時に要素の ID を取得します)。

var elems = $("body *");

$(elems).each(function() {
    var elem = this;

    $(elem).bind("mouseover", function() {
        $(elem).css("border", "1px solid #00f");
    });        

    $(elem).bind("mouseout", function() {
        $(elem).css("border", "none");
    });        

    $(elem).bind("click", function() {
        $("#elements").html($(elem).attr("id"));
    });
});

例: jsfiddle の例はこちら

Answer 2

$('body').on('click', function () {
    var me = this;
    // you can also get the id like
    var id = this.id;
    // you can also get the class
    var classes = $(this).attr('class');
    // and more
});

ページのリロード/デフォルトの送信を防ぎたい場合はpreventDefault()、以下のように使用します。

$('body').on('click', function (e) {
    e.preventDefault();

    var me = this;
    // you can also get the id like
    var id = this.id;
    // you can also get the class
    var classes = $(this).attr('class');
    // and more
});

動的要素の場合、以下のようにして達成できるデリゲート イベント ハンドラー(別名ライブ)が必要です。.on()

$('body').on('click', '*', function(e) {
  // you code like above approach
});

Answer 3

これを使用することもできますが、DOM のサイズによってはパフォーマンスが低下する場合があります。

$('*').on('click', function () {
    var clickedElement = this;
});

Answer 4

これを試すことができます：

JQuery コード

$(document).ready(function(){
     $('*').on('click', function(){
          console.log(this);
     });
});

ドキュメントに必ず JQuery を追加してください。次に、上記を試してください。firebug のコンソールを確認してください。