点击 Html Select 中的option标签时获得的鼠标坐标与点击页面上的其他地方存在差异

<select id="px">
	<option>123213213</option>
	<option>123213123</option>
	<option>21321321321313</option>
</select>

$("body").click(function(e){
		console.log("x:"+e.clientX);
		console.log("y:"+e.clientY);
	});

标题有点长，呵呵，代码如上。

clientX是“设置或获取鼠标指针位置相对于窗口区域的 x 坐标，其中窗口区域不包括窗口自身的控件和滚动条”

当鼠标点击在select弹出的option框中时，其X和Y坐标并不相对于窗口区域，而是相对于这个option框的左上角。

screenX是“设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标”

当用screenX去获取的时候，X和Y坐标确实是相对于屏幕的左上角的。

offsetX是“设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标”

当用offsetX去获取鼠标点击的坐标时，其X和Y也是相对于option框的

总而言之，点击option框时用clientX或offsetX获取鼠标点击坐标时，与点击页面上的其他地方存在差异，使用的时候要特别的注意。