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.

[SlyDave]

I know this is an old issue, I just wanted to address the adding of the event every *end (resizeend, dragend etc) being a bad idea, simple add the once option to the Listener.

.on('dragend', function (event) {
    event.target.addEventListener('click', (event) => event.stopImmediatePropagation(), {capture: true, once: true});
}

[mcf11y]

I'm trying to apply this in my React project, did exactly the same as in the comments above and found that it doesn't always work. Since the click after dragging caused by the browser occurs depending on the current position of the cursor and if you go beyond the border of the browser, then this is a document.

A solution that always works for me is to add a listener to the document or window:

.on('dragend', function () {
  window.addEventListener(
    'click',
    (ev: MouseEvent) => ev.stopImmediatePropagation(),
    {capture: true, once: true},
  );
}

[beerwin]

@SlyDave and @LobanovAndrey 's solutions are the best ones. These should be documented. These wil not prevent other click event from being triggered on child nodes.