Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tap target and release target are always the same. #230

Closed
lightsprint09 opened this issue Mar 28, 2013 · 4 comments
Closed

tap target and release target are always the same. #230

lightsprint09 opened this issue Mar 28, 2013 · 4 comments

Comments

@lightsprint09
Copy link

By tapping on a Element and releasing the finger on another Element, the release.target is not the HTMLElement it should be. The HTMLElement is the Element that was tapped before.

But it works with Click-Events.

@aule
Copy link

aule commented Apr 8, 2013

Yes, I've notice the same thing, and it is quite frustrating as I had gone quite a long way just testing with the mouse.

The underlying events for touchstart and touchend both provide the element the touch started on as the event target. However, as Hammer emulates touches for mouse based events, it picks up the correct (in my opinion) target for the fake touchend event.

Technically the problem is that the behavior is inconsistent as the touchend target is correct according to specification (see the link at the end).

Personally, I'd suggest making the mouse behavior the standard one, and perhaps using elementFromPoint(), although I can see good reasons for either option. My main argument in favour though is that drag-and-drop events make more sense, and I can place a 'release' or 'dragEnd' event in the eventDelegates when using Backbone.

More info on touchend target: http://stackoverflow.com/questions/11523496/find-element-finger-is-on-during-a-touchend-event

@aule
Copy link

aule commented Apr 8, 2013

I've come up with a very crude workaround which will re-fire the event for the "real" target:

            $(".dragSourceElement").hammer().on("release",function (event) {
                var touchData = event.gesture.touches[0],
                    pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1,
                    realTarget = document.elementFromPoint(touchData.pageX * pixelRatio, touchData.pageY * pixelRatio);
                if (!_.isNull(realTarget) && realTarget != event.target) {
                    $(realTarget).hammer().trigger("release",_.extend({},event.gesture,{target:realTarget}));
                }
            });

This was tested on an iPad 2 (safari, non-retina) and a Nexus 4 (chrome, retina). It is sadly unlikely work for Safari on retina devices.

@jtangelder
Copy link
Member

For now, I will leave it in Hammer as it is, but i will like to this issue/solution in the wiki.

@lightsprint09
Copy link
Author

ok. this works, but try it on retina display. I think the problem is, that iOS does not care about ratio. A retina displays innerWidth/etc is the same as a non retina device.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants