On Safari, you can get the location of where the user touched the screen from event.pageX and event.pageY. However, on my Android browser, event.pageX and event.pageY are always 0. Is there any way to get the location of a touch event in the browser on Android?
This is from memory, since I don't own an Android device anymore, but I think it's right. At the very least, it should get you started in the right direction. Good luck.
var elem = document.getElementById('elem');
elem.addEventListener('touchend', function(e){
var pageX = e.changedTouches[0].pageX,
pageY = e.changedTouches[0].pageY;
}, false);
Related
Try this code snippet:
window.ondragend = function(event){
console.log(event.pageX)
}
window.onmouseup = function(event){
console.log(event.pageX)
}
click on a location on a page and then drag an element to the same location. In a maximised window both (at least in Chrome on Windows) pageX' will be the same.
If you minimize the window to fill, say, the right half of the screen, the ondragend will report a different pageX value.
Why does this behaviour happen?
How do I get the correct pageX value from ondragend? Ondragend does not send a mouseup simultaneously, so I can't use that.
This behaviour has been fixed in the latest versions of Chrome.
When a user is on a touch screen device, I'd like to restrict diagonal scrolling - so the idea is to force scrolling one direction at a time - horizontal or vertical.
I've set up a JS Fiddle that detects if touch scrolling is enabled and I'm able to output the x and y coordinates. But I don't see an offset or anything and figure I need that to calculate the intended direction.
I know that apple uses a directionalLockEnabled that will restrict, so I'm wondering if something like this is available in Kendo. If not, maybe there's a way I can figure out which direction the user is intending to scroll in and 'freeze' the other coordinate.
A JS fiddle I created (relevant part in the dataBound method):
http://jsfiddle.net/dmathisen/tskebcqp/
(the relevant code only works on touch... but should work if you enable mobile emulation in dev tools)
Another issue is the amount of times the scroll event is triggered. When working, maybe I can set up a debounce to handle how often it's triggered.
If you want to use javascript for this fix, you can calcul the ranges of the X and Y moves.
For that with touch devices, set the start posi X and Y when touchstart and calcul the distances when touchmove
var touchY = touchX = 0;
$(document).delegate('.yourWrap', 'touchstart', function(e){
touchX = e.originalEvent.touches[0].pageX;
touchY = e.originalEvent.touches[0].pageY;
});
$(document).delegate('.yourWrap', 'touchmove', function(e){
if (Math.abs(touchX - e.originalEvent.touches[0].pageX)
> Math.abs(touchY - e.originalEvent.touches[0].pageY)) {
// Block overflow-y
} else {
// Block overflow-x
}
touchX = e.originalEvent.touches[0].pageX;
touchY = e.originalEvent.touches[0].pageY;
});
For wheel devices, compare delta
(e.wheelDeltaY/3 || -e.deltaY)
(e.wheelDeltaX/3 || -e.deltaX)
I built a touch/mouse friendly jQuery plugin. It works on phones(ios, android...) and desktops browsers. But i have some issues with Windows 8 Chrome installed on laptop with touch screen. Unfortunately i dont have such a device and cant do any tests.Also IE10 works fine.
Let me explain you what i have inside(very simplified code):
1.Check is touch device:
base.isTouch = ("ontouchstart" in document.documentElement);
2.Get proper events
if(base.isTouch === true){
//use touch events:
"touchstart.owl",
"touchmove.owl",
"touchend.owl"
} else {
//usemouse events
"mousedown.owl",
"mousemove.owl",
"mouseup.owl"
}
3.Check touch events:
if(base.isTouch === true){
x = event.touches[0].pageX
y = event.touches[0].pageY
} else {
x = event.pageX
y = event.pageY
}
link to real code
I think problem with chrome is that detect my touch events but use mouse events instead and translate them to touch.
I can add mouse and touch events together:
$('elem').on('mousedown.owl touchstart.owl',func);
Which is OK but then i have a problem with event.touches[0].pageX
link to plugin landing page
Thanks!
Problem solved
To get mouse and touch events working together on windows 8 chrome with touchscreen i had to:
1.add two events on one element "touchstart.owl mousedown.owl"
2.check "event.touches":
if(event.touches){
x = event.touches[0].pageX
y = event.touches[0].pageY
} else {
x = event.pageX
y = event.pageY
}
To get mouse and touch events working together on windows 8 chrome with touchscreen i had to:
1.add two events on one element "touchstart.owl mousedown.owl"
2.check "event.touches":
if(event.touches){
x = event.touches[0].pageX
y = event.touches[0].pageY
} else {
x = event.pageX
y = event.pageY
}
The simplest solution is to include Touch Punch plug-in http://touchpunch.furf.com/
I did it for my project and it works well - U can test it, here is my project:
http://englishtotheworld.com/
I want to make a web page on mobile devices (both Android and iOS) with fingers swipe effect, but when I add event.preventDefault() into ontouchstart / ontouchmove / ontouchend callback functions the scroll bar of the web page is being disabled, it is a disaster :(
I made an ugly hack for this with scrollTop so that the page can be scrolled:
element.ontouchmove = function(event) {
event.preventDefault();
var oldScrollTop = document.body.scrollTop;
var dist = final_y - start_y // here start_y is pageY from touchstart and final_y is current pageY
document.body.scrollTop = oldScrollTop - dist > 0 ? oldScrollTop - dist : 0;
//...
}
It works now but I still want to know:
It is there any other better solutions about this?
Why we must use "preventDefault()" in the callback functions? what we have prevented by this?
Thanks.
I'm really struggling on an Android app in Phonegap and JQuery.
All I want to do is bind a touchmove to an element and then check the X and Y coordinates as I move my finger (a drag, basically)
$('#someElm').bind('touchmove',function(event){
//Code here..!
});
The touchmove fires when I touch the screen, but then I don't really know what the objects of the event are - I've tried event.screenX, event.pageX, but the don't work.
Any ideas?
Here the reference for mobile safari (android is basically the same):
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
what you want is:
var x = event.touches[0].pageX;
var y = event.touches[0].pageY;
If you are running on android you also need to cancel the touchmove event to get new ones while touching. Don't ask me why...