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

前言

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

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

设计监听mousedown，mouseup的计时器

设计监听mousedown，mouseup的位置

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

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

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

js当中的鼠标事件

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

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

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

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

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

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

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

mousedown

mouseup

click

实现方法

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

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;

}

总结

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