echarts力导向图区分鼠标点击事件与拖拽事件（angularjs）
使用echarts的力导向图做了一个知识图谱，要求点击节点的时候，把节点的数据作为关键词搜索。知识图谱，以前没做过，也不知道用什么好，百度了一下看到有人说用echarts可以做，然后就用了echarts，后来发现，拖拽节点也会触发点击事件。不知道怎么实现echarts拖拽的时候不触发点击事件，就用了这种办法。
先放一个javascript中区分鼠标单击和拖动事件的链接：http://blog.csdn.net/aitangyong/article/details/41006877
var timmerHandle = null;
var isDrag = false;
var isClick = false;
myChart.on("click", function (param){
setTimeout(function(){
if(isClick && param.dataType == "node"){
console.log("点击了节点");
}
},500);
});
myChart.on("mousedown", function (param){
//因为mouseDownFun每次都会调用的，在这里重新初始化这个变量
isDrag = false;
//延迟100ms
timmerHandle = setTimeout(setDragTrue,200);
});
myChart.on("mouseup", function (param){
if (!isDrag){
//先把doMouseDownTimmer清除，不然200毫秒后setGragTrue方法还是会被调用的
clearTimeout(timmerHandle);
console.log("mouse up.");
isClick = true;
}else{
isDrag = false;
console.log("draging over.");
isClick = false;
}
});
function setDragTrue() {
isDrag = true;
} 以下是完整代码：
<div id="map" mapping-charts webkit-dep="webkitDep">div>Module.directive("mappingCharts",function(){
return {
restrict:'ACE',
scope:false,
template:'',
replace:false,
link:function($scope,element,attrs,controller){
var myChart = echarts.init(element.find('div')[0]);
var webkitDep = attrs.webkitDep;
var option;
var timmerHandle = null;
var isDrag = false;
var isClick = false;
$scope.$watch(webkitDep, function(v){
if(v){
option = {
legend: {
// data: ['人物关系']//此处的数据必须和关系网类别中name相对应
x: 'left',//图例位置
//图例的名称，这里返回短名称，即不包含第一个，当然你也可以包含第一个，这样就可以在图例中选择主干人物
data: $scope.webkitDep.categories.map(function (a) {
return a.name;
})
},
series: [{
type: 'graph',
layout: 'force',
// animation: false,
label: {
normal: {
show:true,
position: 'right',
//回调函数，你期望节点标签上显示什么
formatter: function(params){
// return params.name;
var newParamsName = "";
var paramsNameNumber = params.name.length;
var provideNumber = 6;
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.name.substring(start, paramsNameNumber);
} else {
if(p > 0){
tempStr = params.name.substring(start, end-1) + "...";
newParamsName += tempStr;
break;
}else{
tempStr = params.name.substring(start, end) + "\n";
}
}
newParamsName += tempStr;
}
} else {
newParamsName = params.name;
}
return newParamsName
},
}
},
draggable: true,
data: $scope.webkitDep.nodes.map(function (node, idx) {
node.id = idx;
return node;
}),
categories: $scope.webkitDep.categories,
force: {
gravity:0.03,
layoutAnimation:true,
// xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项
// yAxisIndex : 0, //y轴坐标
edgeLength: 55,//连线的长度
repulsion: 150 //子节点之间的间距
},
symbolSize:20,
edges: $scope.webkitDep.links
}]
};
myChart.setOption(option);
}
});
myChart.on("click", function (param){
setTimeout(function(){
if(isClick && param.dataType == "node"){//点击线是不能搜索的，因此判断触发点击事件的数据是否是节点
$("input[name=keyword]").val(option.series[0].data[param.dataIndex].name);
$rootScope.goSearchPage();
}
},500);
});
myChart.on("mousedown", function (param){
//因为mouseDownFun每次都会调用的，在这里重新初始化这个变量
isDrag = false;
//延迟100ms
timmerHandle = setTimeout(setDragTrue,200);
});
myChart.on("mouseup", function (param){
if (!isDrag){
//先把doMouseDownTimmer清除，不然200毫秒后setGragTrue方法还是会被调用的
clearTimeout(timmerHandle);
console.log("mouse up.");
isClick = true;
}else{
isDrag = false;
console.log("draging over.");
isClick = false;
}
});
function setDragTrue() {
isDrag = true;
}
}
}
});大佬们又更好的办法请不吝赐教！