这个是我在做一个d3的demo的时候出现的一个问题吧,就是想要他实现拖动d3的叶子节点,但是的话,不触发他的点击事件。
在这里,我想过以下两种种方案:
- 设计监听mousedown,mouseup的计时器
- 设计监听mousedown,mouseup的位置
但是很快就实践了一下,然后测试不同的电脑:
- 设定计时器的话,会导致不知道设多长时间,一开始设定100ms,但是发现,有些鼠标点击速度不够,但是设置超过100ms的话,点击快的已经拉动完了,这样的体验感很差。
- 接下来就只能设计一下监听位置了,这时候,又有一个问题,d3当中绑定节点的事件,是没有接口给你拿到他的事件对象的。这时候,我就想到一个好方法,就是设计监听其父组件的事件就可以了,反正都会冒泡的。接下来就实践一下吧。
js当中的鼠标事件
在这里,我就介绍一些常用的吧,更多的,可以看看js权威指南或者js高级教程
- click: 用户单击主鼠标键(一般是左边)或者按下回车键时触发
- dbclick: 用户双击主鼠标键(一般是左边)或者按下回车键时触发
- mousedown: 用户按下任意鼠标按钮触发,键盘不能触发
- mousemove: 鼠标在元素内移动就不断的触发,键盘不能触发
- mouseup: 用户松开鼠标键时候触发,键盘不能触发