Hold event triggers click/touch event in iOS safari

[nikolac]

I'm using the "hold to start drag" model on touch devices. When I drop an element, a touch/click event is triggered at the x y coord of the start of the hold. I've tried preventDefault() and stopPropagation() from the hold callback, but I can't seem to stop the click.

Any help or workaround would be greatly appreciated.

Thank you

[taye]

Because the hold event is fired from a timeout after the initial touschstart, you can't prevent the default using the hold event. You would have to call preventDefault on the down or up event (maybe both).

[nikolac]

That worked, thank you!

[tomber]

I'm having the same issue when using hold to start drag. To use preventDefault on the down event solves this problem but breaks scroll of the target div. Any ideas of how to work around this would be much appreciated. The scrolling div has overflow-y: scroll;and -webkit-overflow-scrolling: touch;

[taye]

I think that calling preventDefault on the first move event after going down also prevents scrolling. So something like this might work for you:

interact(target)
  .draggable({ manualstart: true })
  .on('hold', function (event) {
    var interaction = event.interaction;

    if (!interaction.interacting()) {
      interaction.start({ name: 'drag' },
                        event.interactable,
                        event.currentTarget);
    }
  })
  .on('move', function (event) {
    if (event.interaction.interacting()) {
      event.preventDefault();
    }
  });;

[tomber]

This prevents scroll of the div while dragging which is great, thanks!. Unfortunately it doesn't solve the original problem of the initial click/touch event triggered on hold. Any ideas for workaround to improve this solution to prevent the initial click event?

[taye]

You could use interact.js' tap events instead of native click events. Other than that, I don't think there's anything that can be done.

[taye]

Actually, you could also add a click event listener with useCapture which calls preventDefault and stopImmediatePropagation.

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

[tomber]

It was actually the context menu on tap hold that was causing my problem since drag was interrupted when the contextmenu event fired. Disabling the context menu solves the problem:

.on('contextmenu', function (event) {
    event.preventDefault();
})

It all works perfectly when combined with the suggested solution for scroll on drag:

.on('move', function (event) {
    if (event.interaction.interacting()) {
        event.preventDefault();
    }
})

Thank you @taye !