Question

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

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

我想到的是以下内容 -

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

    });
});

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

Answer 1

可能是使用事件的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文档中返回属性here和here。 $.attr('id')将返回元素的ID，以及$.data()将返回data-*属性。

要获取父元素的属性，只需使用$(this).parent()即可。例如，要获取包含所单击元素的表单的ID，请使用$(this).closest('form').attr('id');。所有内容都与点击的元素（$(this)）相关，因此您只需使用DOM traversal functions。

但是，使用$('*').bind() 令人难以置信效率低下;你正在将事件处理程序绑定到页面上的每个元素，实际上你应该用.on()（jQuery 1.7 +）委托事件：

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

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

Answer 2

使用第

页上的点击事件的目标

$(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)

})

Answer 3

查看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
});

jquery或js代码，用于获取网页中当前所选表单项/文本/图像的精确节点数据

3 个答案: