js鼠标事宜剖析——如何用js完成一个拖动然则不触发其点击事宜

2019年8月24日 219次阅读 来源: 广工小成

媒介

这个是我在做一个d3的demo的时刻涌现的一个题目吧，就是想要他完成拖动d3的恭弘=叶 恭弘子节点，然则的话，不触发他的点击事宜。

在这里，我想过以下两各种计划：

  1. 设想监听mousedown，mouseup的计时器
  2. 设想监听mousedown，mouseup的位置

然则很快就实践了一下，然后测试差别的电脑：

  1. 设定计时器的话，会致使不知道设多长时间，一开始设定100ms，然则发明，有些鼠标点击速率不够，然则设置凌驾100ms的话，点击快的已拉动完了，如许的体验感很差。
  2. 接下来就只能设想一下监听位置了，这时刻，又有一个题目，d3当中绑定节点的事宜，是没有接口给你拿到他的事宜对象的。这时刻，我就想到一个好要领，就是设想监听其父组件的事宜就能够了，横竖都邑冒泡的。接下来就实践一下吧。

js当中的鼠标事宜

在这里，我就引见一些经常运用的吧，更多的，能够看看js威望指南或许js高等教程

  • click: 用户单击主鼠标键（平常是左侧）或许按下回车键时触发
  • dblclick: 用户双击主鼠标键（平常是左侧）或许按下回车键时触发
  • mousedown: 用户按下恣意鼠标按钮触发，键盘不能触发
  • mousemove: 鼠标在元素内挪动就不停的触发，键盘不能触发
  • mouseup: 用户松开鼠标键时刻触发，键盘不能触发

然后鼠标主键点击触发的事宜依次是

  • mousedown
  • mouseup
  • click

完成要领

<!--dom构造-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="father">
        <div id="child"></div>
    </div>
</body>
</html>
// 先编写一个跨浏览器绑定事宜的对象吧
var EventUtil = {
    // 增加绑定事宜
    addHandle: function(element, type, handler) {
        if(element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    // 移除绑定事宜
    removeHandler: function(element, type, handler) {
        if(element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }
    
}

计时器完成要领

    var timer,  // 计时器
        toClick;    // 推断是不是跳转
    
    EventUtil.addHandle(document.getElementById("child"), "mousedown", function () {
        toClick = true;
        timer = setTimeout("toClick = false",100);
    })
    EventUtil.addHandle(document.getElementById("child"), "mouseup",function(node){
        clearTimeout(timer);
        if(toClick){
            console.log("click")
        }
    })

盘算位置完成要领

    var beginX, // 肇端位置
        beginY,
        endX,   // 完毕位置
        endY;

    // 盘算肇端位置和完毕位置
    document.getElementById("father").addEventListener("mousedown", function (e) {
        beginX = e.clientX;
        beginY = e.clientY;
    },false)
    document.getElementById("father").addEventListener("mouseup", function (e) {
        endX = e.clientX;
        endY = e.clientY;
    },false)

    // 推断是不是要跳转
    EventUtil.addHandle(document.getElementById("child"), "click", function(){
        if(!isdrag(beginX, beginY, endX, endY)){
            console.log("click");
        }
    })

    // 推断是不是拖动了，这里我设置了1px，人人能够依据本身来举行修正吧
    function isdrag(x1, y1, x2 , y2) {
        if(Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)) <= 1) {
            return false;
        }
        return true;
    }

总结

实在，以为这两种要领能够合营运用更好，由于能够有些用户拉回到了本来的位置，人人能够自行多发挥，而且代码比较短和简朴，我就不举行多的封装了，人人自行相识一下就行，有什么疑问能够留言。

    原文作者：广工小成
    原文地址: https://segmentfault.com/a/1190000013777375
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞