问题描述:
使用jointjs中,需要给元素添加点击事件监听,但是发现并不能监听到pointerclick,因时间紧迫,故先用pointerdown事件代替,现在回过头来,解决这个问题
官方文档中关于pointerclick的说明:
原因分析:
在搜索答案的过程中,出现了一种解决方法,即根据官方文档中关于clickThreshold的说明:
Paper的这个属性默认为0,会影响pointerclick事件的监听
究竟是怎么一个影响法呢?
文档中翻译过来就是当鼠标移位的距离超过这个数值,就不会触发点击事件,所以设置这个属性是为了区分拖拽和点击动作的。
但是,我又没有帕金森,不至于点击的时候手抖成那个样子吧。所以,下面这样设置Paper并不能解决问题。
var paper = new joint.dia.Paper({
el: document.getElementById('holder'),
model: graph,
height: 600,
width: 900,
interactive:true,
drawGrid: 'FixedDot',
gridSize: 10,
clickThreshold: 3 //设置clickThreshold
});
解决方案:
查看pointerclick部分的源码:
pointerclick: function(evt) {
// magnetpointerclick can stop propagation
var data = this.eventData(evt);
// Trigger event only if mouse has not moved.
if (data.mousemoved <= this.options.clickThreshold) {
evt = joint.util.normalizeEvent(evt);
var view = this.findView(evt.target);
if (this.guard(evt, view)) return;
var localPoint = this.snapToGrid({ x: evt.clientX, y: evt.clientY });
if (view) {
view.pointerclick(evt, localPoint.x, localPoint.y);
} else {
this.trigger('blank:pointerclick', evt, localPoint.x, localPoint.y);
}
}
},
其实这里也可以看出关于clickThreshold的逻辑,当鼠标拖动距离大于clickThreshold的时候,是不执行下面的操作的。
从这两句,可以看出,如果view找不到也是不会触发事件的
var view = this.findView(evt.target);
if (view) {
view.pointerclick(evt, localPoint.x, localPoint.y);
}
将evt打印到控制台,果然evt.target
在pointerclick的时候是undefined
最后,将
var view = this.findView(evt.target);
改为
var view = this.findView(evt.originalEvent.target);
就能找到了,问题解决