jointJS - why pointerclick event doesnt work, only pointerdown gets fired

Question

This works:

paper.on('cell:pointerdown', function(cellView, evt, x, y) {
   alert("pointerdown");
}); 

but this code does not:

paper.on('cell:pointerclick', function(cellView, evt, x, y) {
   alert("pointerclick");
}); 

the reason for this is that pointerdown is always first to fire, how can I use pointerclick and not run into pointerdown?

EDIT: the question might be a little misleading: I want to know why pointerclick is not fired at all when I click the mouse pointer. ponterdown is working but it stops there, nothing is propagated further (eg. when I depress the mouse button..- therefore performing a click)

Pyrrha

Answer 1

OK, I found solution. There is a switch in joint.js:

        // Allowed number of mousemove events after which the pointerclick event will be still triggered.
        clickThreshold: 0,

so if I set my paper like this:

var paper = new joint.dia.Paper({
    //... other settings
    clickThreshold: 1  //or any number > 0 if you have more specific events there
})

it works! There is nothing about clickThreshold in the documentation of jointJS, I guess it could be worth to add it especially in combination with events like pointerclick.

Pyrrha

Answer 2

I had a similar problem, that in some instances the pointerclick event wasn't thrown, when clicking on an item, but when clicking on the background, it worked. The part of the library that is important starts around line 9030 (when using jointjs v0.9.6):

 // Trigger event when mouse not moved.
    if (this._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);
        }
    }

turns out, for some reason or another, this._mousemoved sometimes returns 1 instead of 0, even though the mouse is completely stable and hasn't been moved. So like the already given answer, it can be solved by:

var paper = new joint.dia.Paper({
    //... other settings
    clickThreshold: 1  //or any number > 0 if you have more specific events there
})

I would have used the comment function, but I don't have enough reputation points to do that...

Determinant