问答博客资讯标签用户活动
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

图片拖动无法触发 mouseup 事件

头像
ppJuan
    1124

    我想实现图片拖动功能，但是图片拖动后无法触发 mouseup 事件，代码如下：

    <!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>event</title>  
    <style>  
        #box {  
            width: 100px;  
            height: 100px;  
            position: fixed;  
        }  
    </style>  
</head>  
<body>  
    <div><img id='box' src='http://avatar.csdn.net/C/E/8/1_qq_33665647.jpg'></div>  
    <script type="text/javascript">  
        var oDiv = document.getElementById("box");  
        oDiv.onmousedown=function(ev)  
        {  
            var oEvent = ev;   
            var disX = oEvent.clientX - oDiv.offsetLeft;  
            var disY = oEvent.clientY - oDiv.offsetTop;  
            document.onmousemove=function (ev)  
            {  
                oEvent = ev;  
                oDiv.style.left = oEvent.clientX -disX+"px";  
                oDiv.style.top = oEvent.clientY -disY+"px";  
            }  
            document.onmouseup=function()  
            {  
               document.onmousemove=null;  
               document.onmouseup=null;  
            }  
              
        }  
          
    </script>  
</body>  
</html>

    改用 drag 事件也无法解决问题:
    加上以下一句：

    oDiv.ondragend=document.onmouseup;

    则无法连续拖动。

    咋办呢？

    javascript
    阅读 7.5k
    6 个回答
    得票最新
    头像
    yellowsun
      1083
      ✓ 已被采纳

      我直接复制代码在chrome里是正常的，但是用火狐试了一下好像就有问题了，拖拽的时候选中到了图片，会打开新窗口（可能和浏览器设置有关）。
      综上，尝试处理掉拖拽的默认事件，加入

              function imgdragstart() {
            return false;
        }
        for (i in document.images) document.images[i].ondragstart = imgdragstart;

      在火狐中也测试通过了。楼主可以参考一下行不行

      头像
      agui1989
        4.6k17153196

        mousemove 事件中阻止默认行为： e.preventDefault()

        头像
        Captain
          2.9k42233

          我复制你的代码是正常的啊 可以触发

          头像
          某熊猫桑
            16.1k61547
            头像
            ppJuan
              1124
              头像
              玲儿
                21
                新手上路，请多包涵

                js 禁止浏览器默认的图片拖动效果

                document.getElementsByTagName('img')[0].onmousedown = function(e){
    e.preventDefault()
};
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题