Comments (16)
thanks @seltix5 your solution helped me. i had to modify it slightly (closest() returns an array), but now anchors work in draggable components.
from interact.js.
Is there any permanent solution to this issue? The "fix" mentioned above stopped working after upgrading to v1.4.0
from interact.js.
Here are some things you can do:
- Use the
Interactable#ignoreFrom
setting to prevent actions that start from anchor elements -interact('*').ignoreFrom('a')
- 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. - 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(...);
...
from interact.js.
The issues with preventDefault and tap that I mentioned (as well as another issue with tap) were fixed in 99f2f7c, 6aacb39 and 99f2f7c.
from interact.js.
Did any of the suggestions above solve your problem?
from interact.js.
Sorry for the delay. Yes, that fixed it!
from interact.js.
Turns out the fix worked for the Android tablet but not Ipad 3.
from interact.js.
Which fix did you use?
from interact.js.
The plunkr uses the master branch. I did clear the cache. Tried on safari & chrome.
from interact.js.
I meant that which of the things that I suggested did you try?
- Use the
Interactable#ignoreFrom
setting to prevent actions that start from anchor elements -interact(target).ignoreFrom('a')
- Use interact's "tap" event instead of click -
interact(target).on('tap', function ...)
. - Use
Interactable#preventDefault
to avoid preventing the click.
from interact.js.
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?
from interact.js.
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 */);
from interact.js.
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');
}
});
from interact.js.
+1 @shubh3695 how did you figure it?
from interact.js.
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.
from interact.js.
I'm closing this issue in favour of #859.
from interact.js.
Related Issues (20)
- Missing TypeScript types (e.g. `styleCursor` option) HOT 1
- Issue on dropzones with 1.10.20 release HOT 7
- How to implement elements snapping to each other functionality? HOT 1
- @Interacrt/Interact cannot trigger the move event
- draggable and gesturable div, behavior lock with inertia
- Issue with Module Parsing in Project Using react-multi-crops HOT 3
- Vite production builds fail after v1.10.25
- TypeScript compile errors - version 1.10.26 HOT 4
- Resize modifier - wrong types HOT 1
- Gestures not working in ShadowDom
- Incompatible with Angular (v17) HOT 3
- New Snap syntax not working HOT 1
- Can't drag element when wrap drag item inside div HOT 1
- Restricting a drag with parent as origin. HOT 4
- Set snap on or off by user
- Demo Page down (https://interactjs.io/) HOT 1
- Is there a way to set the z-index of dropactive?
- interactjs.io is down
- mouseButtons typescript type definitions
- Web server is down (interactjs.io) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from interact.js.