问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

javascript 拖动无法触发mouseup事件

头像
Ethan
    14026

    问题描述

    拖动一个设置了draggable=true的元素，到另一个监听了mouseup的元素上，无法触发mouseup事件。

    这个问题是做项目时遇到的，需求是有一个地图，地图旁边有一个列表，列表中的元素可以拖到地图上生成一个点。
    我的做法就是列表的元素设置draggable=true变成可拖动元素，地图监听mouseup事件，拖动列表元素到地图上触发mouseup事件，获取坐标生成点。

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

    出现bug的操作环境：
    操作系统(版本号)/浏览器(版本号)
    windows(10)/chrome(66.0.3359.181正式版本64位)，
    windows(10)/chrome(69.0.3497.100正式版本64位)，
    macOSX(10.11.6)/chrome(69.0.3497.100正式版本64位)

    正常运行的操作环境：
    macOSSierra(10.12.4)/chrome(69.0.3497.100正式版本64位)

    根据测试情况来看和浏览器版本无关，和操作系统版本有关。

    相关代码

    以下是根据实际项目模拟了一个小demo，经过测试仍然存在这个问题

    <!DOCTYPE html>
<html>

<head>
    <title>test</title>
</head>
<style type="text/css">
html,
body,
ul,
li {
    margin: 0;
    padding: 0;
}

#container {
    width: 500px;
    height: 500px;
    position: relative;
}

#map {
    width: inherit;
    height: inherit;
    background: #d9d9d9;
    position: relative;
}

#list {
    width: 100px;
    height: 100%;
    list-style: none;
    position: absolute;
    top: 0;
    right: 0;
    background: #fffff1;
}

li:not(:last-child) {
    border-bottom: 1px solid #d9d9d9;
}
</style>

<body>
    <div id="container">
        <div id="map"></div>
        <ul id="list">
            <li draggable="true">1</li>
            <li draggable="true">2</li>
            <li draggable="true">3</li>
            <li draggable="true">4</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
document.getElementById('map').addEventListener('mouseup', function(e) {
    alert('map mouseup')
}, false)
</script>

</html>

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

    运行上面的代码，拖动右边列表中的1234到灰色的div上，希望弹出‘map mouseup'的弹窗。
    图片描述

    如果说是js的兼容问题，和操作系统应该没什么关系啊？是在不知道为何会出现这种问题，还望高人解答

    html5javascript
    阅读 5.2k
    1 个回答
    得票最新
    头像
    小强
      312
      ✓ 已被采纳

      var container = document.getElementById('container'),

              list = document.getElementById('list'),
        map = document.getElementById('map');
        for(var i =0;i<list.children.length;i++){
           list.children[i].onmousedown = function(e){
            e.preventDefault();
            document.onmousemove = function(ev){
                var xx = ev.pageX-this.offsetWidth/2-list.offsetLeft;
                var yy = ev.pageY-this.offsetHeight/2;
                this.style.cssText="position:absolute;top:"+yy+"px;left:"+xx+"px;";
            }.bind(this);
            document.onmouseup = function(e){
                e.preventDefault();
                this.style.cssText="";
                alert('map mouseup');
                document.onmousemove = null;
            }.bind(this);
           }
        }
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题