draggable blocks click

[jdewit]

A link inside a draggable element does not fire a click event when clicked.

checkout plunkr and click the link in the item.

Only seems to happen on touch devices. (ipad3 android).

[taye]

Here are some things you can do:

1. Use the Interactable#ignoreFrom setting to prevent actions that start from anchor elements - interact('*').ignoreFrom('a')
2. Use interact's "tap" event instead of click - interact('*').on('tap', function ...). I just niticed that tap events are fired even if the pointer is dragged. I'll fix that soon.
3. Use Interactable#preventDefault to avoid preventing the click. This would also mean that the page can be scrolled by the user when dragging. I also noticed that this setting is broken 😦

---

And by the way, in your demo you loop through similar elements and make them Interactable individually. You could instead pass a selector string to interact and it would work very similarly.

// instead of
var items = document.getElementsByClassName('item');

for (var i=0; i<items.length; i++) {
  interact(items[i]).draggable(...);
  ...
}

// you can do
interact('.item').draggable(...);
...

[taye]

The issues with preventDefault and tap that I mentioned (as well as another issue with tap) were fixed in 99f2f7c, 6aacb39 and 99f2f7c.

[taye]

Did any of the suggestions above solve your problem?

[jdewit]

Sorry for the delay. Yes, that fixed it!

[jdewit]

Turns out the fix worked for the Android tablet but not Ipad 3.

[taye]

Which fix did you use?

[jdewit]

The plunkr uses the master branch. I did clear the cache. Tried on safari & chrome.

[taye]

I meant that which of the things that I suggested did you try?

1. Use the Interactable#ignoreFrom setting to prevent actions that start from anchor elements - interact(target).ignoreFrom('a')
2. Use interact's "tap" event instead of click - interact(target).on('tap', function ...).
3. Use Interactable#preventDefault to avoid preventing the click.

[markadrake]

Hi Taye, I have a project where I can't seem to get the click event to fire properly. I can't post the source code at the moment because it isn't clean and to the point - but ultimately I have an un-ordered list element with images inside. The images have interact draggable assigned to them. The images also need to respond to the click event. But on mobile devices, the click event is ignored. Not globally - but only for elements that are draggable.

So I attempted solution number 2, and replaced the click event with interact's tap event. However, now desktop is messed up. On the tap (or click) event I toggle an info window's visibility. I also register a one time document click event so that the info window will be toggled off if the user interacts with anything else on the page. Now, on desktop, this event seems to fire off immediately. It's as if the "tap" event triggers a "click" event directly after running, even though I have e.preventDefault() and e.stopPropagation(). It's the damnedest thing.

Any thoughts on what I might be fighting with?

Do you think attaching the draggable event to the <li> and leaving the click event on the <img> would straighten things out?

[taye]

Hello!

The images also need to respond to the click event. But on mobile devices, the click event is ignored.

Because the images are draggable, interact.js calls preventDefault on the touchstart and touchend events on the mobile device. Browsers fire MouseEvents by default after TouchEvents and these simulated events can be prevented (at least on Webkit/Blink; I don't think it works on Firefox) by calling preventDefault on the TouchEvents and that also prevents the simulated click event.

Now, on desktop, this event seems to fire off immediately. It's as if the "tap" event triggers a "click" event directly after running, even though I have e.preventDefault() and e.stopPropagation(). It's the damnedest thing.

Click events can't be prevented by calling preventDefault or stop[Immediate]Propagation on the preceding mousedown and mouseup events. The only thing you can do is to stop the click event's propagation early on as I explained here: #217

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

[seltix5]

hi all,
i found this problem too and since the click event is not unified between desktop and touch i develop this solution, maybe this can help someone else :

interact('.navbar-nav').draggable(settings).on('tap', function (event) {
    // because draggable blocks click event on touch, do manual trigger
    var link = jQuery(event.target).closest('a');
    if (link.exists() && event.pointerType === 'touch') {
        jQuery(event.target).trigger('click');
    }
});

[crawld]

thanks @seltix5 your solution helped me. i had to modify it slightly (closest() returns an array), but now anchors work in draggable components.

[shubh3695]

Is there any permanent solution to this issue? The "fix" mentioned above stopped working after upgrading to v1.4.0

[tryhardest]

+1 @shubh3695 how did you figure it?

[shubh3695]

Given that this issue was mostly on iOS, @tryhardest I had to capture "tap" events and filtered, ios device [detected by navigator], and then "click" the Element manually. it was a work-around, not a solution. I am no longer a part of that organization, where I did this 😄 , so dont remember it entirely, but yes, this was figured out after a long time.

[taye]

I'm closing this issue in favour of #859.