js鼠标事件解析——如何用js实现一个拖动但是不触发其点击事件

Tony 发布于2019-08-26 11:49 / 1648人阅读

摘要：前言这个是我在做一个的的时候出现的一个问题吧，就是想要他实现拖动的叶子节点，但是的话，不触发他的点击事件。这时候，我就想到一个好方法，就是设计监听其父组件的事件就可以了，反正都会冒泡的。

前言

这个是我在做一个d3的demo的时候出现的一个问题吧，就是想要他实现拖动d3的叶子节点，但是的话，不触发他的点击事件。

在这里，我想过以下两种种方案：

设计监听mousedown，mouseup的计时器

设计监听mousedown，mouseup的位置

但是很快就实践了一下，然后测试不同的电脑：

设定计时器的话，会导致不知道设多长时间，一开始设定100ms，但是发现，有些鼠标点击速度不够，但是设置超过100ms的话，点击快的已经拉动完了，这样的体验感很差。

接下来就只能设计一下监听位置了，这时候，又有一个问题，d3当中绑定节点的事件，是没有接口给你拿到他的事件对象的。这时候，我就想到一个好方法，就是设计监听其父组件的事件就可以了，反正都会冒泡的。接下来就实践一下吧。

js当中的鼠标事件

在这里，我就介绍一些常用的吧，更多的，可以看看js权威指南或者js高级教程

click: 用户单击主鼠标键（一般是左边）或者按下回车键时触发

dblclick: 用户双击主鼠标键（一般是左边）或者按下回车键时触发

mousedown: 用户按下任意鼠标按钮触发，键盘不能触发

mousemove: 鼠标在元素内移动就不断的触发，键盘不能触发

mouseup: 用户松开鼠标键时候触发，键盘不能触发

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

mousedown

mouseup

click

实现方法





    
    
    
    Document

// 先编写一个跨浏览器绑定事件的对象吧
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;
    }

总结

其实，觉得这两种方法可以配合使用更好，因为可能有些用户拉回到了原来的位置，大家可以自行多发挥，而且代码比较短和简单，我就不进行多的封装了，大家自行了解一下就行，有什么疑问可以留言。

GPU云服务器云服务器不触发鼠标按下事件 js触发事件 js取消触发事件 js 输入时触发事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107629.html

原生js练习题---第六课

摘要：自定义多级右键菜单实现效果自定义多级右键菜单第五课第六题中已经通过事件实现了一级右键菜单，所以这题只要在上面再添加事件唤出子菜单即可。 0x1完美拖拽实现效果：6-01完美拖动这里没有使用h5的拖动，毕竟原题也是考察借助鼠标事件实现自定义的拖动，所以就借鉴了《js高级程序设计》里的自定义拖动自己封装了个拖动api，当然由于做这个系列题目使用的都是es5的语法，所以IE8往下就兼容不...

tinyq 2019-08-19 18:17 评论0 收藏0
如何用原生js来写一个swiper滑块插件（上）原理

嗨~ 这里是芝麻，今天我们一块来做一个滑块插件。那么啥是滑块插件呢？滑块插件能干嘛呢？请看下图： showImg(https://user-gold-cdn.xitu.io/2019/5/27/16af8370362d18e4); 是不是有点印象了，没错，他的最基本的用法就是左右滑动，插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果，不过你完全可以组合各种元素来适应不同的场景...

Dionysus_go 2019-05-27 17:41 评论0 收藏0
【详】JS实现拖拽元素互换位置

摘要：只有在可放置的元素上面松开鼠标才会触发事件，所以这个是被放置的节点。写在前面的废话大家好，我是练习js时长接近两年半的个人练习生--李大雷算了，直接鸡,你太美~ 应用场景很多时候，我们需要让用户来自定义自己想要的菜单顺序，或者一些按钮的排序，那么这个时候，怎么给用户自定义顺序呢？拖拽无疑是最简单易懂的，因为玩过手机的都知道怎么拖动桌面的app来改变位置。那么要怎么做呢？最简...

lentrue 2019-08-02 16:12 评论0 收藏0
【详】JS实现拖拽元素互换位置

摘要：只有在可放置的元素上面松开鼠标才会触发事件，所以这个是被放置的节点。写在前面的废话大家好，我是练习js时长接近两年半的个人练习生--李大雷算了，直接鸡,你太美~ 应用场景很多时候，我们需要让用户来自定义自己想要的菜单顺序，或者一些按钮的排序，那么这个时候，怎么给用户自定义顺序呢？拖拽无疑是最简单易懂的，因为玩过手机的都知道怎么拖动桌面的app来改变位置。那么要怎么做呢？最简...

AaronYuan 2019-08-23 16:48 评论0 收藏0
温故js系列（10）-事件event

摘要：当用户选择文本框或中的一个或多个字符触发。当文本框或内容改变且失去焦点后触发。事件对象事件对象就是对象，通过处理函数传递。比如右击文本框输入区域，会弹出系统菜单点击超链接会跳转到指定页面点击提交按钮会提交数据。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：Event JavaScript-事件even...

Freelander 2019-08-20 10:24 评论0 收藏0