【Javascript】clientX,Y が zoom 時にずれる

HTML
1<div style="zoom:0.5;"></div>

上記のように zoom を指定したボックスで clientX,Y を取得するとずれてしまうのですが、何とかならないでしょうか？

よろしくお願いいたします。

追記

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="UTF-8">
5	<title>Insert title here</title>
6	<link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
7	<link href="css/jquery-ui.structure.min.css" rel="stylesheet" type="text/css" />
8	<script type="text/javascript" src="js/jquery.min.js"></script>
9	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
10	
11	<script type="text/javascript" src="js/mascat.resizable.js"></script>
12	<script type="text/javascript" src="js/mascat.draggable.js"></script>
13	
14	<style type="text/css">
15	* {
16		margin	: 0;
17		padding: 0;
18	}
19	.Toolbar {
20		height	: 1.5em;
21	}
22	.Drawing {
23		height	: 1000px;
24		width	: 100%;
25		background-color: #CCDDFF;
26		zoom	: 0.5;
27	}
28	.Axis {
29		position: absolute;
30	}
31	.Axis.Horizontal {
32		height	: 1px;
33		width	: 100%;
34		background-color: #000000;
35	}
36	.Axis.Vertical {
37		height	: 100%;
38		width	: 1px;
39		background-color: #000000;
40	}
41	</style>
42</head>
43<body>
44	<div class="Toolbar">
45		<div>test</div>
46	</div>
47	<div class="Drawing">
48		<div class="Axis Horizontal"></div>
49		<div class="Axis Vertical"></div>
50	</div>
51	<script type="text/javascript">
52		jQuery( document ).bind( 'mousemove', function ( evt ) {
53			var pos = [ evt.clientX, evt.clientY ];
54			
55			jQuery( '.Drawing .Axis.Horizontal' ).css( 'top', pos[ 1 ] );
56			jQuery( '.Drawing .Axis.Vertical' ).css( 'left', pos[ 0 ] );
57		} );
58	</script>
59</body>
60</html>

再現する最低限のコードです

行動規範の内容に同意します

回答1件

現象が再現する最小コードの提示
ターゲットブラウザの名前とバージョン
開発環境構成

zoom なので ie でしょうけど、質問の前提がありません。
現象が再現する最小コードとは、回答する人がコピペであなたと同じ不具合を確認するために必要です。

投稿2016/02/24 14:23

ipadcaron

総合スコア1693

yuux01

2016/02/24 15:38

CSS の zoom ですので、全ブラウザです。最新の物を使用しています。 var pos = Mascat.Tools.clientToDrawing( [ evt.pageX, evt.pageY ] ); clientToDrawing : function ( pos ) { var left = jQuery( '#DRAWING' ).get( 0 ).offsetLeft; var top = jQuery( '#DRAWING' ).get( 0 ).offsetTop; var p = jQuery( '#DRAWING' ).offset(); var zoom = parseFloat( jQuery( '#DRAWING' ).css( 'zoom' ) ); zoom = ( zoom >= 10 ? zoom / 100 : zoom ); //zoom = ; console.log( jQuery( '#DRAWING' ).scrollLeft(), jQuery( '#DRAWING' ).scrollLeft() ); pos[ 0 ] = pos[ 0 ] - p.left + jQuery( '#DRAWING' ).scrollLeft(); pos[ 1 ] = pos[ 1 ] - p.top + jQuery( '#DRAWING' ).scrollTop(); return pos; } 修正しつつなので余分なコードが入ってます。 jQuery( '#DRAWING .Axis.Vertical' ).css( { left : pos[ 0 ] } ); jQuery( '#DRAWING .Axis.Horizontal' ).css( { top : pos[ 1 ] } );