mousedown、click冲突

写项目时遇到的一个需求,这里记录一下,简单说一下功能,需要一个img图片,可拖动,可点击跳转,但是mousedown得优先级高于ckick,不多说了下面这直接上代码。

css 复制代码
<div id="avatar" style="position: absolute;top: 10%;right: 3%;z-index: 999;" @mousedown="smallDown($event)" @click="dbcl($event)">
            <img style="width: 90px;" draggable="false" src="../assets/image/客服入口.png" alt="">
    </div>

最开始是上图这么写的,但是运行后发现,不行,同时绑定没生效,于是做了下面的调整

css 复制代码
<div id="avatar" style="position: absolute;top: 10%;right: 3%;z-index: 999;" @mousedown="smallDown($event)">
        <div @click="dbcl($event)">
            <img style="width: 90px;" draggable="false" src="../assets/image/客服入口.png" alt="">
        </div>
    </div>

这里两个时间都会生效了,但是新的问题,如何区分开两个事件,百度了很多,最后还是用setTimeout,去做时间差异,如下图

javascript 复制代码
dbcl(e) {
        clearTimeout(this.down);// 清除上一个
 },
smallDown(e) {
        clearTimeout(this.down);// 清除上一个
        this.down = setTimeout(function (event) {
          
          }, 200);// 超过这个时间代表走的是拖动
      }

好了,事件的解决了,接下来就该,拖动的了,话不多说直接上代码

ini 复制代码
smallDown(e) {
        clearTimeout(this.down);
        this.down = setTimeout(function (event) {
            this.mouse = true;
          	var demo = document.getElementById('avatar');// 获取图片的demo
          	demo.style.pointerEvents = 'none';//阻止事件穿透
            var canMove = false 
            var x = 0, y = 0  
            x = e.pageX - demo.offsetLeft // 获取位置
            y = e.pageY - demo.offsetTop
            canMove = true
            var Onmousedown = document.onmousedown;
            var Onmousemove = document.onmousemove;
            document.onmousemove = function (e) {
                e.preventDefault(); //阻止默认行为
                if (canMove) {
                    var left = e.pageX - x
                    var top = e.pageY - y
                    if (left < 0) left = 0
                    if (top < 0) top = 0
                    var maxLeft = window.innerWidth - demo.offsetWidth
                    var maxTop = window.innerHeight - demo.offsetHeight
                    if (left > maxLeft) left = maxLeft
                    if (top > maxTop) top = maxTop
                    demo.style.left = left + "px" // 得到图片移动的位置坐标
                    demo.style.top = top + 'px'
                }
                document.onmouseup = function (event) {
                    event.preventDefault(); //阻止默认行为
                    demo.style.pointerEvents = null;
                    canMove = false
                    document.onmousedown = Onmousedown;
                    document.onmousemove = Onmousemove;
                }
            }
            window.oncontextmenu = function (e) {
                e.preventDefault()//阻止默认行为
            }
            window.onblur = function () {
                canMove = false 
            }
          }, 200);
      }

好了,到这里,图片拖动,点击就完成了。可能有些还不是很好,也有些粗糙,这里只是作为日常的一个问题记录。有不足之处希望多多指正。

相关推荐
万邦科技Lafite2 分钟前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
一只小透明啊啊啊啊3 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友3 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao3 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子4 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...4 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪4 小时前
函数组件和异步组件
前端·javascript·面试
淮北4944 小时前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友4 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei4 小时前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发