6

重複の可能性:
絶対座標による DOM 要素の検索

マウスをクリックした位置にあるすべての DOM 要素のリストを見つけたいです。javascriptまたはjqueryを使用してこれを行う必要があります。誰かが私にこれを行う方法を提案してもらえますか?

4

4 に答える 4

1

クリックされた要素から始めて、クリックされたすべての要素のリストを取得して、これを行うにはjQueryを使用します。マウス クリックでハンドラーをドキュメントに追加します。

$( document ).click( function( event ) {
    // event.currentTarget is the clicked element
    // this is a list of all the parents of the clicked element
    $( event.currentTarget ).parents();
}
于 2012-10-22T04:59:32.973 に答える
1

これは仕事をします（fiddle）：

$(document).click(function(e) {
    var hitElements = getHitElements(e);
});

var getHitElements = function(e) {
    var x = e.pageX;
    var y = e.pageY;
    var hitElements = [];

    $(':visible').each(function() {
        var offset = $(this).offset();
        if (offset.left < x && (offset.left + $(this).outerWidth() > x) && (offset.top < y && (offset.top + $(this).outerHeight() > y))) {
            hitElements.push($(this));
        }
    });

    return hitElements;
}​

を使用する場合:visibleは、次のことに注意してください。

可視性: 非表示または不透明度: 0 の要素は、レイアウト内のスペースを消費するため、可視と見なされます。要素を非表示にするアニメーション中、要素はアニメーションの最後まで表示されていると見なされます。要素を表示するアニメーション中、要素はアニメーションの開始時に表示されていると見なされます。

visibility:hiddenそのため、必要に応じてandopacity:0要素を除外する必要があります。

于 2012-10-22T05:52:32.733 に答える
0

これを確認してください-http://jsfiddle.net/blackpla9ue/U2RCE/5/ 「world」
という単語をクリックして実際の動作を確認してください。

これは、absolute配置された要素でも機能します。

$('*').click(function(event){
    console.log($(this)[0].tagName + ' ' + $(this)[0].className);
});​
于 2012-10-22T05:24:17.153 に答える
0

JavaScriptを使用して座標位置でマウスクリックをシミュレートすることはできません（セキュリティ上の問題を考えてください！）ので、やりたいことを達成できるとは思いません。さらに、ページ上の任意の x/y 位置にどのレイヤーが存在するかをプログラムで確認する方法はありません。何かをデバッグしようとしていて、ページ上の特定の x、y 位置ですべてを表示したい場合は、見終わったら Firebug または Chrome インスペクターで各要素を削除し、インスペクターを使用してその下にあるものを確認します。それ。

必要なことを実行するツールが本当に必要な場合は、jquery とブラウザー アドオンを組み合わせて使用​​できます。event.x 座標と event.y 座標を使用して実際のマウス クリックをシミュレートする Chrome または Firefox 拡張機能を作成できます。次に、クリックされた要素のすべての親をキャプチャするという前述の提案を使用できます。これらの要素をカタログ化したら、クリックしたアイテムの最上位の親を見つけて複製し、最上位の親自体を除くすべての複製の要素を削除し、この最上位の親の背景を透明に設定します。ここで、DOM の元の要素をこの透明なクローン要素に置き換えます。このようにして、ページのレイアウトを保持し、別のクリックをシミュレートすると、実際には「スルー」をクリックしています。最上位の要素 (透明) とその背後にある次の DOM 要素 (存在する場合) をクリックします。body タグに到達するまで、上記のプロセスを繰り返します。最終的に、特定の x、y 位置にあるすべての DOM 要素の完全なリストが得られます。

于 2012-10-22T05:32:04.130 に答える