鼠标的位置可以用很多方式来表现, 这取决于坐标系是什么. 相对整个屏幕, 相对于浏览器窗口, 相对于页面, 或相对于触发鼠标事件的元素, 都会有不同的 X,Y 值.
如果要获取鼠标位置, 首先要捕捉鼠标事件.
- // 比如, 可以监听鼠标移动事件
- document.addEventListener ('mousemove', showMousePosition, false);
- // 通过 callback 来显示, 或使用鼠标位置参数
- function showMousePosition ( event ){
- // 相对于网页
- console.log ( 'page:' + event.pageX + ',' + event.pageY );
- // 相对浏览器窗口
- console.log ( 'client:' + event.clientX + ',' + event.clientX );
- // 相对于鼠标事件的目标元素
- console.log ( 'offset:' + event.offsetX + ',' + event.offsetY );
- // 相对于屏幕
- console.log ( 'screen:' + event.screenX + ',' + event.screenY );
- // 相对于元素所在的 "层", 与是否绝对定位有关
- // 另, webkit 已经准备停止支持这个 "不符标准" 的参数了:
- http://code.google.com/p/chromium/issues/detail?id=101733
- console.log ( 'layer:' + event.layerX + ',' + event.layerY );
- // 这我也不知道是什么, 似乎它总是等于 clientX/Y
- console.log ( 'raw:' + event.x + ',' + event.y );
- console.log ( '--------' ); // sep
- }
参考:
W3C DOM Compatibility - CSS Object Model View
http://www.quirksmode.org/dom/w3c_cssom.html#mousepos
DOM Level 2 Event Model
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent
来源: https://www.zhihu.com/question/20003851