Question

我想要像Firebug一样检测我点击的DOM元素。到目前为止，Google只提供了有关检测已删除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。然后尝试上面。检查firebug上的控制台。

使用jquery检测DOM元素

4 个答案: