1

elementFromPoint を使用して、UI マスクによってキャプチャされた後にマウス イベントを渡す要素を見つけています。マスクでイベントをキャプチャし、マスクを非表示にしてから、elementFromPoint(event.pageX, event.pageY) を使用して基になる要素を取得します。

問題は、絶対配置された要素に対して elementFromPoint がまったく機能しないように見えることです。絶対配置されていない最初の親を与えるだけです。絶対配置された要素と絶対配置されていない要素の両方を取得する方法はありますか、または elementFromPoint で親を取得したら、絶対配置された子を手動で検索する必要がありますか?

ありがとう

4

2 に答える 2

1

私の経験では、通常の古い document.elementFromPoint(...) は絶対に配置された要素でも機能しますが、要素の「順序」(どの要素が実際に「前」にあるか) に敏感です。思い通りに動作させるには、絶対配置要素に CSS の「z-index」を (場合によっては 10 以上の正の値で) 明示的に指定する必要があることがわかりました。

これは、要素に背景がなく、テキストのみが含まれている場合に特に問題になります。要素がすべて同じ場所に同時に表示されるためです。見た目だけではどちらが「正面」にあるのか判断するのは難しいかもしれません。

于 2013-08-09T22:58:44.133 に答える
0

私はコードを試して作成しました。そのコードは完全に正常に機能します。見てください

html

<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>

CSS

div {
    width: 50px;
    height: 50px;
    background-color: black;
    color: white;
    margin-bottom: 30px;
}
#five{
    position: absolute;
    left: 10px;
    top: 20px;
    background: red;
}

js

$(document).ready(function(){        
    $(document.body).bind('click', function(e){
        var elem = document.elementFromPoint(e.pageX, e.pageY);

        alert('you selected element id: ' + elem.id);
    });
});
于 2013-07-17T21:09:55.900 に答える