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

前言

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

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

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

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

1. 设定计时器的话，会导致不知道设多长时间，一开始设定100ms，但是发现，有些鼠标点击速度不够，但是设置超过100ms的话，点击快的已经拉动完了，这样的体验感很差。
2. 接下来就只能设计一下监听位置了，这时候，又有一个问题，d3当中绑定节点的事件，是没有接口给你拿到他的事件对象的。这时候，我就想到一个好方法，就是设计监听其父组件的事件就可以了，反正都会冒泡的。接下来就实践一下吧。

js当中的鼠标事件

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

• click: 用户单击主鼠标键（一般是左边）或者按下回车键时触发
• dblclick: 用户双击主鼠标键（一般是左边）或者按下回车键时触发
• mousedown: 用户按下任意鼠标按钮触发，键盘不能触发
• mousemove: 鼠标在元素内移动就不断的触发，键盘不能触发
• mouseup: 用户松开鼠标键时候触发，键盘不能触发

然后鼠标主