1

クリックイベントを収集するページがあり、それらの場所を別のページの600pxx750pxのボックスに比例的にマッピングしたいと思いますevent.pageX。event.pageYつまり、ボックス内に他のページのスクリーンショットがある場合、クリック位置のマーキングが同じ場所に視覚的に表示されます。

($('body').width(), $('body').height())、、(document.body.offSetWidth, document.body.offSetHeight)を自由に使用できることはわかってい(screen.width, screen.height)ますが、正確な比率を得るためにこれらを組み合わせるのが最善かどうかはよくわかりません。

現在、私は（sudoコードで）使用しています：

x_ratio = 600 / document.body.offSetWidth
y_ratio = 750 / document.body.offSetHeight

new_x_position = event.pageX * x_ratio
new_y_position = event.pageY * y_ratio

ボックス内のクリックイベントのマーキングは

<div id='click_marker' 
    style="position: relative; top: new_y_position px; left: new_x_position px;">
</div>

しかし、これはブラウザや画面サイズ全体で精度を維持しているようには見えません。1つのブラウザと画面サイズでクリック位置を取得し、任意のブラウザと画面サイズで正確にマッピングできるようにしたいと思います。

この計算を一貫して正確に行うにはどうすればよいですか？

4

2 に答える 2

0

まず、座標を変換する領域を確立する必要があります。ブラウザウィンドウですか、それともドキュメント本文ですか。つまり、スクロールバーがある場合、誰かが下にスクロールしてページの下部をクリックすると、600x750ボックスの下部または外側にも表示されますか？あなたの質問からは明らかに明らかではありません。

event.pageXとevent.pageYは、ドキュメントの左端と上端からの位置を提供します。したがって、body.offsetWidthの使用は、本文がドキュメント全体を埋める場合にのみ一貫性があります。理解するために、次のフィドルを確認してください。http: //jsfiddle.net/Exceeder/YPHkr/-右の体の境界を越えると、相対座標が1.0を超えることに注意してください。

最も簡単な方法は、$（window）.width（）と$（window）.height（）を取得することです-スクロール位置を考慮する必要がない場合。そうしないと、スクロール位置を計算する必要があり、アルゴリズムは少し難しくなります。

それを確立したら、正しい幅と高さを取得する必要があります。関連する質問：さまざまなブラウザのdocument.body.offsetWidthバリエーション

于 2012-04-26T23:40:00.247 に答える
0

pageXとpageYは、画面ではなくWebページに関連する座標を提供します
。screenXとscreenYを使用して画面に関連する座標を取得するか、clientXとclientYを使用してブラウザのクライアントウィンドウに関連する座標を取得します。これらのイベントフィールドは、すべてのブラウザで使用できるとは限りません。

于 2012-04-26T23:13:05.793 に答える