0

jqueryを使用して、クリックされたWebページ上のアイテムの正確な詳細を取得したいと考えています。

その項目は、フォーム項目 (チェックボックス、テキスト ボックス、テキスト領域など) またはテキストのセクション (段落または 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');。すべてがクリックされた要素 ( ) に関連しているため、 DOM トラバーサル関数$(this)を使用するだけで済みます。

ただし、使用$('*').bind()は非常に非効率的です。実際には(jQuery 1.7+)でイベントを委任する必要があるときに、ページ上のすべての要素にイベント ハンドラーをバインドしています。.on()

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

このアプローチでは、ページ上のすべての要素に<body>イベントをバインドするのではなく、 1 つのイベントのみをバインドします。

于 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 に答える