获取鼠标/标签在屏幕上的位置

巨蟹座守护骑士

已于 2023-12-22 18:09:24 修改

阅读量1.2k

点赞数

分类专栏： js 文章标签：前端 html

于 2022-07-22 18:41:27 首次发布

本文链接：https://blog.csdn.net/weixin_70563937/article/details/125937208

版权

js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

行内事件绑定

<html lang="en" onclick="fun(event)">
<!-- 实参必须是event -->

给html绑定一个行内事件来获取鼠标点击的位置

(给任意一个标签绑定事件获取事件源e就可以,但是只有在绑定事件的标签里面才可以获取到位置,想全局获取就绑定在html标签上面)

然后通过 e.clientX 和 e.clientY 来获取鼠标点击离窗口左上角的距离

e.pageX和e.pageY也一样可以

e.clientX 和 e.clientY是相对于可以看见的电脑屏幕区域

e.pageX和e.pageY是相对于整个文档的区域

获取标签距离浏览器的动态位置

元素.getBoundingClientRect().top 得到元素当前距离浏览器的上外边距

可以使用 top right bottom left 四个方向都可以获取

给要在鼠标点击位置添加的标签设置绝对定位或者外边距 偏移量就是获取到的位置

      img {
            position: absolute;
          }

注意：直接给图片设置绝对定位默认相对于window进行定位

w/2和w/4是让鼠标在添加的标签的正中间 w是标签的宽度

<body>
    <!-- body上面没有内容点击不了 放html上面有自带内容 用document 或者 window 获取绑定点击事件-->
    <script>
        var body = document.querySelector("body")
        function fun(e) {
            var w = Math.random() * 200 + 150
            //console.log(w);//图片的随机大小
            var x = e.clientX - w / 2 + "px"
            var y = e.clientY - w / 4 + "px"
            // // console.log(x, y);
            // 给window添加一个img标签 每次会被重置/只有一个/定不了位
            // document.write(`<img src='./千库网_可爱星星动画装饰挂件_GIF编号3214.gif' width='${w}'style='top:${y};left:${x}'>`)

            // 在body里面添加一个img标签 通过定位到鼠标点击对应位置/使用+=添加多个=就是刷新一个
            body.innerHTML += (`<img src='./千库网_可爱星星动画装饰挂件_GIF编号3214.gif' width='${w}'style='top:${y};left:${x}'>`)

            // 添加多个
            // var span1 = document.createElement("span")
            // span1.innerHTML = `<img src='./千库网_可爱星星动画装饰挂件_GIF编号3214.gif' width='${w}'style='top:${y};left:${x}'>`
            // body.appendChild(span1)

            // var img = document.createElement("img")
            // img.src = './千库网_可爱星星动画装饰挂件_GIF编号3214.gif';
            // img.width = w
            // img.style.marginTop = y
            // img.style.marginLeft = x
            // body.appendChild(img)
        }
    </script>
</body>

使用innerHTML连续添加多个标签使用+=来实现

使用父元素.appendChild(子元素)在后面添加元素

使用父元素.insertBefore(新的子元素,参照节点) 在前面添加元素

还有通过创建事件然后使用位移来控制位置的方法，但是感觉比较多，要了解的自己看，不懂@我

扩展：

如果想跟随鼠标位置就使用鼠标移动事件(mousemove)就可以一直获取位置

行内事件可以代替事件委托控制新的生成的元素在创建新的元素的时候绑定行内事件

<body>
    <button>按钮</button>
    <script>
        var btn = document.querySelector("button")
        var body = document.body
        btn.onclick = function () {
            // 在body里面添加li标签 顺便在li标签里面加行内事件
            body.innerHTML += `<li onclick='fun()'>添加的内容</li>`
        }
        // 点击添加的内容执行这个函数
        function fun() {
            // 新添加的标签也可以使用这个方法
            console.log("绑定成功~");
        }
    </script>
</body>

有时候使用 innerHTML+= 来添加标签比创建元素方便得多(合理使用效率更高)^-^