0

我想使用 jquery 在已单击的网页上获取该项目的确切详细信息。

该项目可以是表单项目（如复选框、文本框、文本区域等）或文本部分（在段落或 div 或其他中）或列表或图像......

我想出的是以下——

$(function(){
  $('*')
    .bind('click', function(event) {
        //now obtain details of item that has been clicked on...    

    });
});

现在，我想要确切的详细信息 - 即 div id/form id/paragraph #，即该特定项目的所有详细信息。我如何获得这些数据？我知道这些数据在 DOM 中可用，但我只是不知道在这种特殊情况下如何获取它......

4

3 回答 3

2

target可能是使用事件属性的最佳方式。默认情况下，这会返回一个非 jQuery 对象，这并不是特别有用，但是将其包装起来可以$()解决这个问题：

$(function() {
    $(document).bind('click', function(event) {
        var element = $(event.target);

        alert(element.height());    // Get height   
        alert(element.attr('id'));  // Get ID attribute
        // ...
    });
});

如果你想修复你当前的方法，在你的处理程序中，你可以使用, 和朋友click()访问该元素的属性：.attr()

$(function() {
    $('*').bind('click', function(event) {
        alert($(this).height());    // Get height   
        alert($(this).attr('id'));  // Get ID attribute
        // ...
    });
});

$(this)在函数范围内引用被单击的元素。在 jQuery 文档中有一个函数列表，它们将在此处和此处返回属性。$.attr('id')将返回元素的 ID 以及其他内容，$.data()并将返回data-*属性。

要获取父元素的属性，只需使用$(this).parent(). 例如，要获取包含单击元素的表单的 ID，请使用$(this).closest('form').attr('id');. 一切都是相对于被点击的元素（$(this)），所以你可以只使用DOM 遍历函数。

但是，使用$('*').bind()效率非常低；您正在将事件处理程序绑定到页面上的每个元素，而实际上您应该使用.on()（jQuery 1.7+）委托事件：

$(function() {
    $('body').on('click', '*', function(event) {
        alert($(this).height());    // Get height   
        alert($(this).attr('id'));  // Get ID attribute
        // ...
    });
});

这种方法只将一个事件绑定到页面上的每个元素，<body>而不是一个事件。

于 2012-06-02T21:11:27.393 回答
1

使用页面点击事件的目标

$(document).click(function(event){ 
  /* store native dom node*/
   var tgt=event.target;
  /* store jQuery object of dom node*/
   var $tgt=$(tgt);
    /* example element details*/
    var details={ id : tgt.id, height: $tgt.height(), tag : tgt.tagName}
    console.log( details)

})
于 2012-06-02T21:24:29.093 回答
0

查看event.target，然后可以使用 jQuery 的.parents()方法查看每个祖先：

$(document).on('click', function(event) {
     var $t = $(event.target); // the element that was actually clicked
     var $p = $t.parents();    // the target's parents

     var $form = $p.filter('form').first(); // the enclosing form, if it exists
});
于 2012-06-02T22:00:11.527 回答