解决JointJsv2.2中pointerclick事件无法监听

问题描述:

使用jointjs中,需要给元素添加点击事件监听,但是发现并不能监听到pointerclick,因时间紧迫,故先用pointerdown事件代替,现在回过头来,解决这个问题
官方文档中关于pointerclick的说明:
官方文档中关于pointerclick的说明


原因分析:

在搜索答案的过程中,出现了一种解决方法,即根据官方文档中关于clickThreshold的说明:

官方文档关于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);

就能找到了,问题解决

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值