使用jquery检测DOM元素

Question

我想检测像Firebug那样点击了哪些DOM元素。到目前为止，谷歌只有关于检测删除的DOM元素的结果才出现。

请告诉我，如果这是可能的jQuery。如果不是，可以使用哪些第三方工具/库来实现目标。

Answer 1

你可以使用它，虽然它可能不是非常高性能，取决于DOM的大小。

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

Answer 2

可以使用获得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 example here

Answer 3

$('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 4

你可以试试这个：

jQuery代码

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

确保在文档中添加JQuery。然后尝试以上。检查控制台上的萤火虫。