0

Web サイトのヒート マップを作成しています。クリックの xy 座標を取得する方法は知っていますが、中央の div のページでは、クリックの xy 座標はユーザーのブラウザー ウィンドウの幅によって異なります。

ウィンドウのサイズに関係なく、後でクリックの位置を表示できるように、一貫した xy をログに記録するにはどうすればよいですか?

jQuery の offset() を使用して、中央の親要素に基づいて xy を取得できます。しかし、このヒート マップを複数のサイトに配置しています。各サイトのマークアップが一意であることを考えると、オフセットの計算に使用する最上位の「ラッパー」要素をどのように判断すればよいでしょうか?

私が見落としている簡単な方法はありますか？

4

4 に答える 4

2

クリックのx/座標だけでなく、ビューポートの/も保存してみてはいかがでしょうか。そうすれば、ビューポートに対するクリックの位置を取得し、クリックが実際にコンテンツのどこで発生したかを計算できます。ywidthheight

$(document).on('click', function (event) {
    var x = event.pageX,
        y = event.pageY,
        w = $(window).width(),
        h = $(window).height();
});

ビューポートの寸法が変更されたときにのみ取得することで、これを最適化できます。

var windowWidth  = 0,
    windowHeight = 0;

$(window).on('resize', function () {
    windowWidth  = $(this).width();
    windowHeight = $(this).height();
}).trigger('resize');//this .trigger will get the dimensions on page-load

$(document).on('click', function (event) {
    var x = event.pageX,
        y = event.pageY,
        w = windowWidth,
        h = windowHeight;
});

アップデート

中央に配置されたページの場合、ビューポートの中心から座標を取得できます。

var windowWidth  = 0,
    windowHeight = 0;

$(window).on('resize', function () {
    windowWidth  = $(this).width();
    windowHeight = $(this).height();
}).trigger('resize');//this .trigger will get the dimensions on page-load

$(document).on('click', function (event) {
    var x = (event.pageX - (windowWidth / 2)),
        y = event.pageY;
});

これによりx、ページの右側にあるものは正の寸法になり、ページxの左側にあるものは負の寸法になります。

ここにデモがあります：http://jsfiddle.net/aWBFM/

于 2012-02-21T21:02:24.170 に答える
0

<body>要素を使ってみましたか？HTML5では必要ないことは知っていますが、使用されていない（クリックが含まれている）インスタンスに出くわしたことはありません。

于 2012-02-21T20:59:11.240 に答える
0

offset() のドキュメントによると、ドキュメントに相対的な座標を取得します。これはあなたが望むものです。あなたがする必要があるのは、ウィンドウの高さと幅を取得することです。次に、ちょっとした計算を使用して、ウィンドウとマップの間の距離を計算します。

$(window).width() と $(window).height() は、必要なものを取得します。

于 2012-02-21T21:01:42.043 に答える
0

event.clientX と event.clientY を見ると、ページの左上隅に対するマウスの位置を取得できるはずです。

特定のオブジェクトに相対的なマウスの位置が必要な場合は、そのオブジェクトの offsetTop および offsetLeft プロパティを調べることができます。(event.clientX - obj.offsetLeft) は、オブジェクトに対するマウスの位置になります。

于 2012-02-21T21:07:23.060 に答える