ブラウザでのクリック位置のマッピング

Question

クリックイベントを収集するページがevent.pageXとevent.pageYで、別のページの600ピクセル×750ピクセルのボックスに比例してマップしたいと考えています。つまり、ボックス内の他のページのスクリーンショットがあれば、クリック位置のマークは同じ場所に視覚的に表示されます。

私は($('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つのブラウザーと画面サイズでクリック位置を取って、ブラウザーと画面サイズで正確にマップできるようにしたいと考えています。

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

Answer 1

まず、座標を翻訳したい領域を設定する必要があります。それはブラウザウィンドウか文書本体ですか？私。スクロールバーがある場合は、誰かがスクロールしてページの下部にあるをクリックしても600x750ボックスの下部に表示されますか？あなたの質問から明らかに明らかではありません。

event.pageXとevent.pageYは、の位置からドキュメントの左端と上端を指定します。したがってbody.offsetWidthを使用すると、ボディ全体がドキュメント全体を塗りつぶすときにのみ一致します。 http://jsfiddle.net/Exceeder/YPHkr/ - 右の体の境界線がどのように相対座標を1.0にするかを確認してください。

最も簡単なことは、$（ウィンドウ）.width（）と$（ウィンドウ）.height（） - スクロール位置を考慮する必要がない場合。それ以外の場合は、スクロール位置を計算する必要があり、アルゴリズムは少し難しくなります。

これを確立したら、正しい幅と高さを取得する必要があります。関連する質問：document.body.offsetWidth variations for different browsers

Answer 2

pageXとpageYは、スクリーンではなくウェブページに関連する座標を返します
screenXとscreenYを基準にして座標を取得して、スクリーンまたはclientXとclientYを基準にしてブラウザのクライアントウィンドウからの相対座標を取得します。これらのイベントフィールドは、すべてのブラウザで使用できるわけではありません。