jquery - 使用 jquery 检测 DOM 元素

Question

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

请告诉我这在 jQuery 中是否可行。如果没有，可以使用哪些第三方工具/库来实现目标。

Answer 1

您可以使用它，尽管根据 DOM 的大小，它的性能可能不是很好。

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

Answer 2

您可以使用以下方法获取 BODY 标记内的所有标记（绑定侦听器以更改 mouseover、mouseout 的边框并在单击时检索元素的 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 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。然后在上面试试。检查萤火虫上的控制台。