怎么实时获取鼠标的当前坐标

　　介绍

这篇文章给大家分享的是有关怎么实时获取鼠标的当前坐标的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

<强>一、事件的兼容:

函数bindEvent (obj、事件、fn) { 　　如果(obj.attachEvent) {//ie 　　obj.attachEvent(& # 39;在# 39;+事件函数(){ 　　fn.call (obj); 　　}); 　　其他}{//chrome& ff 　　obj。addEventListener(事件、fn假); 　　} 　　}

上面兼容ie8以及修正这关键字在ie低版本的指向、下面兼容chrome和ff。其他更常用的封装可以参考我的javascript开源框架gdom

<强>二,用立即表达式搭建一个基本的库

添加获取鼠标坐标的方法

;(函数(窗口){ 　　窗口。G={}; 　　函数bindEvent (obj、事件、fn) { 　　如果(obj.attachEvent) {//ie 　　obj.attachEvent(& # 39;在# 39;+事件函数(){ 　　fn.call (obj); 　　}); 　　其他}{//chrome& ff 　　obj。addEventListener(事件、fn假); 　　} 　　} 　　 　　G。getPos=函数(dom) { 　　var最新={x: 0 y: 0}; 　　bindEvent (dom, & # 39; mousemove& # 39;,函数(ev) { 　　var oEvent=ev | |事件,x, y); 　　如果(oEvent。pageX | | oEvent。pageY) { 　　x=oEvent.pageX; 　　y=oEvent.pageY; 　　其他}{ 　　x=oEvent。clientX + document.body。scrollLeft | | document.documentElement.scrollLeft; 　　y=oEvent。clientX + document.body。scrollTop | | document.documentElement.scrollTop; 　　} 　　x -=dom.offsetLeft; 　　y -=dom.offsetTop; 　　详细的。x=x; 　　详细的。y=y; 　　}); 　　返回详细; 　　}； 　　 　　})(窗口);

<强>三,引入封装的js库,绑定帆布为监听对象,打印当前鼠标的坐标

鼠标的坐标,我这里画了2根线,便于观察。

 & lt; head>
　　& lt;元charset=& # 39; utf - 8 # 39;/比;
　　& lt; script>
　　;(函数(窗口){
　　窗口。G={};
　　函数bindEvent (obj、事件、fn) {
　　如果(obj.attachEvent) {//ie
　　obj.attachEvent(& # 39;在# 39;+事件函数(){
　　fn.call (obj);
　　});
　　其他}{//chrome& ff
　　obj。addEventListener(事件、fn假);
　　}
　　}
　　
　　G。getPos=函数(dom) {
　　var最新={x: 0 y: 0};
　　bindEvent (dom, & # 39; mousemove& # 39;,函数(ev) {
　　var oEvent=ev | |事件,x, y);
　　如果(oEvent。pageX | | oEvent。pageY) {
　　x=oEvent.pageX;
　　y=oEvent.pageY;
　　其他}{
　　x=oEvent。clientX + document.body。scrollLeft | | document.documentElement.scrollLeft;
　　y=oEvent。clientX + document.body。scrollTop | | document.documentElement.scrollTop;
　　}
　　x -=dom.offsetLeft;
　　y -=dom.offsetTop;
　　详细的。x=x;
　　详细的。y=y;
　　});
　　返回详细;
　　}；
　　
　　})(窗口);
　　& lt;/script>
　　& lt; style>
　　#帆布{
　　边界:1 px冲# aaa级;
　　}
　　& lt;/style>
　　& lt; script>
　　窗口。onload=function () {
　　var oCanvas=文档。querySelector (“# canvas"),
　　[=oCanvas。getContext (& # 39; 2 d # 39;),
　　宽度=oCanvas。宽度,高度=oCanvas.height,
　　oInfo=文档。querySelector (“# info"),
　　详细的=G。getPos (oCanvas);
　　oCanvas。addEventListener (“mousemove"、功能(){
　　
　　[。clearRect(0, 0,宽度、高度);
　　oGc.beginPath ();
　　[。函数(详细。x, 0);
　　[。画线(详细。x,高度);
　　[。函数(0,详细。y);
　　[。画线(宽度、详细。y);
　　oGc.closePath ();
　　[。strokeStyle=& # 39; # 09 f # 39;;
　　oGc.stroke ();
　　
　　oInfo。innerHTML=& # 39;鼠标的当前坐标是:(& # 39;+详细的。x + & # 39; & # 39;+详细的。y + & # 39;) & # 39;;
　　},假);
　　}
　　& lt;/script>
　　& lt;/head>
　　& lt; body>
　　& lt;帆布id=癱anvas"宽度=?00”;身高=?00“祝辞& lt;/canvas>
　　& lt; p id=癷nfo"祝辞& lt;/p>
　　& lt;/body>

感谢各位的阅读!关于怎么实时获取鼠标的当前坐标就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!

怎么实时获取鼠标的当前坐标