使用原生JS处理事件监听时遇到的很奇怪的问题

发布于 2022-09-11 18:30:23 字数 1481 浏览 29 评论 0

问题描述

如图，这个是在调试的时候遇到的，当时用js写对mousemove事件的监听，可是在调试的时候事件的监听出现了问题，我尝试用monitorevent观察过，发现鼠标移动时根本就没有mousemove事件出现，而且鼠标也变成了图中所示，这个符号代表的是什么意思呢？图是从微软家edge上截的，我也在chorme浏览器上试过，chorme也会出现这个问题，不过火狐没有这个问题
图片描述

问题出现的环境背景及自己尝试过哪些方法

我当时在写一个自定义滚动条的小项目，需要监听mousedown，mousemove，mouseup事件来追踪鼠标的移动，但是目前遇到这个很奇怪的问题，一直无法解决。
目前网上的资料比较少，所以希望有过此类问题经历的大神现身回答一下。
个人怀疑是浏览器的问题，因为火狐上面跑是完全没问题的

你期待的结果是什么？实际看到的错误信息又是什么？

希望哪位前端大神帮我解解惑，那个符号到底代表什么含义，如果可以能否提供下解决方案，多谢了

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

多谢你的绝情让我学会死心 2022-09-18 18:30:23

我也遇到了这个问题，监听onmove事件出现的，移动的时候，只要那个标志出现，意味着不监听move事件了。请问大神，这个怎么解决？我更改了dom结构后依然有这个问题

回复收藏 0

放手` 2022-09-18 18:30:23

找到BUG所在了，这个真的是浏览器的原因。我写了一个示例代码：
把深蓝色框框当成滚动条，mousedown后拖动（mousemove），然后在别的色块释放（mouseup），再重复上面的操作（可以多试几次），然后你的鼠标就变了，mousemove事件也不会再出现。如果尝试更改下html结构会发现bug就消失了，比如把
<div id="content"></div>删掉。

图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100vw;
            height: 100vh;
            background-color: red;
            position: relative;
        }
        .bbox{
            position: absolute;
            width: 150px;
            height: 100%;
            top: 0;
            right: 0;
            background-color: #c3a9fc;
        }
        .subBox{
            width: 150px;
            height: 150px;
            background-color: blue;
            position: absolute;
            top: 0;
            right: 0;
        }
        #content{
            width: 50vw;
            height: 100vh;
            background-color: aqua;
            /*position: absolute;*/
        }
    </style>
</head>
<body>
<div style="width: 100vw; height: 100vh; position: relative;" class="box">
    <div class="body" style="position: absolute">
        <div id="content">

        </div>
    </div>

    <div class="bbox" style="position: absolute; width: 150px; height: 100%; top: 0px; right: 0px; background-color: rgb(195, 169, 252);">
        <div class="subBox" style="width: 150px; height: 150px; background-color: blue; position: absolute; top: 0px; right: 0px;">

        </div>
    </div>
</div>
</body>
<script>
    window.onload = ()=>{
        log = console.log
        let box = document.getElementsByClassName("box")[0],
        subBox = document.getElementsByClassName("subBox")[0]

        let mouseMove = function(event){
            log("mousemove")
        }
        let mouseUp = function(){
            log("mouseup")
            box.removeEventListener("mousemove", mouseMove)
            box.removeEventListener("mouseup", mouseUp)
        }
        let mouseDown = function(event){
            log("mousedown")
            box.addEventListener("mousemove", mouseMove)
            box.addEventListener("mouseup", mouseUp)
        }
        if(subBox){
            subBox.addEventListener('mouseout', (event)=>{
                log("mouseout")
                subBox.removeEventListener('mousedown', mouseDown)
            })
            subBox.addEventListener('mouseover', (event)=>{
                log("mouseover")
                subBox.addEventListener('mousedown', mouseDown)
            })
        }
    }
</script>
</html>

回复收藏 0

~没有更多了~