js鼠标事件参数,获取鼠标在网页中的坐标
1. 事件对象 event
IE 把 event 事件对象作为全局对象 window 的一个属性
2. 浏览器滚动条高度
标准浏览器 使用 documen.documentElement.scrollLeft documen.documentElement.scrollTop
Safari 等浏览器 使用 window.pageXOffset window.pageYOffset
没有 doctype 声明的页面 document.body.scrollLeft document.body.scrollTop
3. 获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标
// 鼠标事件参数 兼容性封装 Test Already.
var kjfMouse = {
getEvent : function(e){
return e || window.event;
},
getTarget : function(e){
return this.getEvent(e).target || this.getEvent(e).srcElement;
},
getClientX : function(e){
return this.getEvent(e).clientX;
},
getClientY : function(e){
return this.getEvent(e).clientY;
},
// 水平滚动条偏移
getScrollLeft : function(){
return document.documentElement.scrollLeft || // 火狐 IE9及以下滚动条是html的
window.pageXOffset || // IE10及以上 window.pageXOffset
document.body.scrollLeft; // chrome 滚动条是body的
},
// 垂直滚动条偏移
getScrollTop : function(){
return document.documentElement.scrollTop || // 火狐 IE9 及以下滚动条是 HTML 的
window.pageYOffset || // IE10 及以上 window.pageXOffset
document.body.scrollTop; // chrome 滚动条是body的
},
getPageX : function(e){
return (this.getEvent(e).pageX)?( this.getEvent(e).pageX ):( this.getClientX(e)+this.getScrollLeft() );
},
getPageY : function(e){
return (this.getEvent(e).pageY)?( this.getEvent(e).pageY ):( this.getClientY(e)+this.getScrollTop() );
}
};原文地址:https://www.cnblogs.com/tianxiaxuange/p/9873771.html
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!