2

どういうわけか複雑な HTML 構造を想像してみてください。いくつかの要素は時間の経過とともに移動し、他の要素はホバーで移動するなど、物事の位置が正確にはわかりません。理由が何であれ、それらの位置/マージン/パディングがわからないだけです。

私の質問は次のとおりです。ランダムな量の要素 (#my_element_container li) を保持する、あまり情報がないいくつかのラッパー (#complex_wrapper) に含まれる単一のコンテナー (#my_element_container) がある場合、コンテナに touchstart イベントリスナーをアタッチし、ユーザーがクリックした要素を識別できるようにします。

この例のスタイルは次のとおりです。

#complex_wrapper {
    position: absolute;
    width: 600px;
    height: 600px;
    margin-top: 50px;   /* These two change randomly so I can't hardcode a -50! */
    margin-left: 12px;
    background-color: gray;
}
#my_element_container {
    position: absolute;
    top: 95px;
    left: 31px;
}
#my_element_container li{
    position: relative;
    width: 480px;
    height: 90px;
    background-color: red;
    border: 1px black solid;
}

以前の投稿で、コンテナーのマージンとパディングをなんとかして差し引く必要があることをほのめかしたので、要素の上部で 0 座標を取得し、そこから計算することができました。私はその論理を理解していますが、見つけるのに苦労しているのは、他のマージンが何であれ、その「減算値」を動的に作成する方法です。

私が求めていることを示すためにjsfiddleを作成しました。私の目標は、#complex_wrapperにハードコードしたものは何でも、どの要素がクリックされたかを伝えることができるようにすることです: http://jsfiddle.net/342jU/1/

私たちのプロジェクトはjqueryを使用しておらず、今後も使用しません（理由はわかりませんが、使用していないことはわかっています）。

4

1 に答える 1

2

を使用できます.elementFromPoint(x,y)。ここで、x,yは明らかにマウス イベントの座標です (私は を使用touchstartしたことはありませんが、同様の方法で座標を取得できると思います)。そのようなもの: http://jsfiddle.net/Polmonite/Sty7d/。

次のようになります。

my_element_container.addEventListener('click', function(e) {
    e.preventDefault();
    var element = document.elementFromPoint(e.clientX,e.clientY);

// do something with element

}, false);
于 2013-01-24T09:00:08.033 に答える