Interact.js: Can't prevent click event after div dragEnd

[max-mykhailenko]

I use Interact with angular and have ng-click handler on element. Click has called after my dragend event. How I can prevent that? Where I can add

.on('dragend', function (event) { 
  event.interactable.preventDefault(true); // doesn't work
  event.interactable.options.preventDefault = true ; // doesn't work
  event.preventDefault() ; // doesn't work

or smth else?

[taye]

I would think that this is really more of an Angular issue since interact.js' tap event exists to bypass click problems.

There's no default action from InteractEvents so their preventDefault method does nothing. Also, calling preventDefault on mousedown or mouseup events doesn't stop clicks from happening.
If you want to stop the click event then you should add a click event listener with useCapture that just calls event.stopImmediatePropagation().

interact(target).on('click', function (event) {
  event.stopImmediatePropagation();
}, true /* useCapture */);

[max-mykhailenko]

It's works! You save my day, thanks!

.on('dragend', function (event) {
  interact(event.target).on('click', function (_event) {
    _event.stopImmediatePropagation();
  }, true /* useCapture */);
});

[taye]

It's a bad idea to do that on every dragend event. You only need to add the click event listener once.

[zeeshanjan82]

@taye I get Uncaught TypeError: Illegal invocation for stopImmediatePropogation() can you assist?

[taye]

@zeeshanjan82 sorry for the late reply. If you didn't sort it out already, a stack trace would be helpful.