栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

Javascript-跟踪鼠标位置

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Javascript-跟踪鼠标位置

event
mousemove
事件处理程序接收到的对象上报告鼠标的位置,您可以将其附加到窗口(事件冒泡):

(function() {    document.onmousemove = handleMouseMove;    function handleMouseMove(event) {        var eventDoc, doc, body;        event = event || window.event; // IE-ism        // If pageX/Y aren't available and clientX/Y are,        // calculate pageX/Y - logic taken from jQuery.        // (This is to support old IE)        if (event.pageX == null && event.clientX != null) { eventDoc = (event.target && event.target.ownerdocument) || document; doc = eventDoc.documentElement; body = eventDoc.body; event.pageX = event.clientX +   (doc && doc.scrollLeft || body && body.scrollLeft || 0) -   (doc && doc.clientLeft || body && body.clientLeft || 0); event.pageY = event.clientY +   (doc && doc.scrollTop  || body && body.scrollTop  || 0) -   (doc && doc.clientTop  || body && body.clientTop  || 0 );        }        // Use event.pageX / event.pageY here    }})();

(请注意,它的主体

if
只能在旧版IE上运行。)

以上示例的实际操作在将鼠标拖动到页面上方时会绘制点。(在IE8,IE11,Firefox30,Chrome38上进行了测试。)

如果您确实需要基于计时器的解决方案,请将其与一些状态变量结合使用:

(function() {    var mousePos;    document.onmousemove = handleMouseMove;    setInterval(getMousePosition, 100); // setInterval repeats every X ms    function handleMouseMove(event) {        var dot, eventDoc, doc, body, pageX, pageY;        event = event || window.event; // IE-ism        // If pageX/Y aren't available and clientX/Y are,        // calculate pageX/Y - logic taken from jQuery.        // (This is to support old IE)        if (event.pageX == null && event.clientX != null) { eventDoc = (event.target && event.target.ownerdocument) || document; doc = eventDoc.documentElement; body = eventDoc.body; event.pageX = event.clientX +   (doc && doc.scrollLeft || body && body.scrollLeft || 0) -   (doc && doc.clientLeft || body && body.clientLeft || 0); event.pageY = event.clientY +   (doc && doc.scrollTop  || body && body.scrollTop  || 0) -   (doc && doc.clientTop  || body && body.clientTop  || 0 );        }        mousePos = { x: event.pageX, y: event.pageY        };    }    function getMousePosition() {        var pos = mousePos;        if (!pos) { // We haven't seen any movement yet        }        else { // Use pos.x and pos.y        }    }})();

据我所知,如果没有看到事件,就无法获得鼠标的位置,对此另一个堆栈溢出问题的回答似乎可以证实这一点。

旁注 :如果您打算每100毫秒(10次/秒)执行某项操作,请尝试使该功能中执行的实际处理 非常非常有限
。对于浏览器,这是很多工作,尤其是较旧的Microsoft。是的,在现代计算机上,它看起来不多,但是浏览器中却有很多事情……因此,例如,您可以跟踪上一个处理的位置,如果位置不正确,则可以立即从处理程序中保释。改变了。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/415950.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号