js获取鼠标的坐标

忘是亡心i 2022-05-15 00:56 279阅读 0赞

1、JavaScript实现
    
    X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
    
        function mousePosition ( ev ) {
            if ( ev.pageX || ev.pageY ) {
                return { x : ev.pageX, y : ev.pageY };
            }
            return {
                x : ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y : ev.clientY + document.body.scrollTop - document.body.clientTop
            };
        };
    function mouseMove ( ev ) {
        ev = ev || window.event;
        var mousePos = mousePosition(ev);
        document.getElementById('xxx').value = mousePos.x;
        document.getElementById('yyy').value = mousePos.y;
    }
    document.onmousemove = mouseMove;

2、jQuery实现

$('#ele').click(function ( event ) {
        //获取鼠标在图片上的坐标
        console.log('X：' + event.offsetX + '\n Y:' + event.offsetY);
        //获取元素相对于页面的坐标
        console.log('X：' + $(this).offset().left + '\n Y:' + $(this).offset().top);
    });

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220515/c088bda5d57449ca8c4f5b52bdcc95e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220515/b68a153dd65b4b8f877c76f8b41c6f65.png

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 获取鼠标点击位置坐标

相对于屏幕如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距，不考虑ifram

迷南。/ 2022年09月30日 06:04/ 0 赞/ 273 阅读

相关 JavaScirpt 获取canvas中鼠标的坐标

代码 // 监听点击事件 canvas.addEventListener("click", function(event) { getMo

短命女/ 2022年09月10日 02:14/ 0 赞/ 141 阅读

相关 js获取div的坐标

html中最常使用的控件就是div了,那么如何获取div的坐标呢? 如何方法可以实现. Js代码 ![收藏代码][icon_star.png] 1. /\\\ 2

柔光的暖阳◎/ 2022年08月14日 00:51/ 0 赞/ 278 阅读

相关 JavaScript 获取鼠标点击位置坐标

对于获取鼠标点击位置的坐标我们经常遇到，但是在不同的浏览器下会有不同的结果，让我们很苦恼；下面做一些简单的总结：相对于屏幕事件screenX，screenY获取的是

墨蓝/ 2022年06月17日 00:15/ 0 赞/ 261 阅读

相关发现：Click事件也能获取鼠标单击的坐标

按照MSDN的说明以及平时的习惯，我们要获取鼠标单击时的相对坐标，都会使用MouseClick等事件，今天，偶然发现，原来Click事件也可以。 ![0_1323507538

清疚/ 2022年06月16日 07:42/ 0 赞/ 216 阅读

相关鼠标事件和坐标获取(窗口坐标和屏幕坐标)

本文主要介绍重写自带的一些方法，拾取屏幕和窗口坐标信息 -------------------- 效果如下： ![这里写图片描述][70] 分析： > 定

梦里梦外;/ 2022年05月25日 03:57/ 0 赞/ 555 阅读

相关 js获取鼠标的坐标

1、JavaScript实现 X:<input id="xxx" type="text" /> Y:<input id="yyy" type="tex

忘是亡心i/ 2022年05月15日 00:56/ 0 赞/ 280 阅读

相关 JS获取鼠标位置

html代码： ![70][] js代码： ![70 1][] 页面效果，鼠标滑动时实时获取鼠标位置![70 2][] [70]: /images/20

我就是我/ 2022年05月11日 05:10/ 0 赞/ 252 阅读

相关 js模拟点击坐标、鼠标轨迹

<!doctype html> <html lang="en"> <head> <meta charset="utf-8">

客官°小女子只卖身不卖艺/ 2022年02月26日 05:52/ 0 赞/ 1093 阅读

相关 js怎样获取鼠标在页面点击时的位置信息坐标信息

获取鼠标在页面点击时的坐标信息有时候也有它的用户首先，监听页面的点击事件，然后打印其中的事件中的一些属性clientX 和clientY即可得到坐标信息了 ![w

红太狼/ 2021年12月16日 23:17/ 0 赞/ 913 阅读