Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
156
rated 0 times [  159] [ 3]  / answers: 1 / hits: 7327  / 5 Years ago, tue, october 29, 2019, 12:00:00

Click event is working fine when using mouse with computer. Even when I put mouse button down on button move cursor and then release mouse button inside button area, click event is firing. But same with touchscreen it is not working. I know that reason is that in touchscreen that kind of dragging is considered as scrolling. Click event is fired when I don't move finger too much on button. So only down and up without moving. My client has problem that they are moving finger too much and it is too hard to get click event. Is it possible to set bigger threshold for how much finger can move that it is still considered as click and not scroll?



I found this article where touch events are handled byself and translated them to click event. http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html I would not to like to go this road.



Have you any suggestion how can I solve this?



Here is more detail about touch events https://developer.mozilla.org/en-US/docs/Web/API/Touch_events Look at Handling clicks there is described how click is working in touchscreens. Still I didn't managed to work. Few months ago I but evt.preventDefault(); to my touchmove event handler and it did fix problem but currently it seems not.



EDIT:2019.11.5



Here is what was working earlier but no anymore:



html
<body (touchmove)=touchMoveEvent($event)></body>

TypeScript
touchMoveEvent(ev: Event): void
{
ev.preventDefault();
}


And here is basic angular example of button and click handler which is not working if user is moving finger too much. I haven't check what is threshold but my I assume it is something near 10px-20px.



<button (click)=onClickEventHandler($event)>Press button</button>

onClickEventHandler(ev: Event) {
//do the thing here
}


I have tested touchscreen functionality with chrome's devtools toggle device toolbar.


More From » angular

 Answers
3

Here is a nice solution. by using the touchstart and touchend events you can measure the distance between the 2 points and fire a click event if the events where close (in terms of pixels). read my comments.



    class ScrollToClick {
constructor(elem, maxDistance = 20) {
this.elem = elem;
this.start = null;
this.maxDistance = maxDistance;

// Bind the touches event to the element
this.bindTouchEvents();
}

bindTouchEvents() {
this.elem.addEventListener('touchstart', this.onTouchStart.bind(this), false);
this.elem.addEventListener('touchend', this.onTouchEnd.bind(this), false);
}

onTouchStart(e) {
// hold the touch start position
this.start = e.touches[0];

// clear the position after 2000 mil (could be set for less).
setTimeout(() => { this.start = null; }, 2000);
}

onTouchEnd(e) {
// if the timeout was called, there will be no start position
if (!this.start) { return; }

// calculate the distance between start and end position
const end = e.changedTouches[0],
dx = Math.pow(this.start.pageX - end.pageX, 2),
dy = Math.pow(this.start.pageY - end.pageY, 2),
distance = Math.round(Math.sqrt(dx + dy));

// if the distance is fairly small, fire
// a click event. (default is 20 but you can override it through the constructor)
if (distance <= this.maxDistance) {
this.elem.click();
}

// clear the start position again
this.start = null;
}
}


Then you can use it with any element like so:



// use any element you wish (here I'm using the body)
const elem = document.body;

// initialize the class with the given element
new ScrollToClick(elem);

// listen to a click event on this element.
elem.addEventListener('click', (e) => {
console.log('Clicked');
})

[#5780] Saturday, October 26, 2019, 5 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
margaritakristinak

Total Points: 502
Total Questions: 127
Total Answers: 98

Location: England
Member since Mon, May 17, 2021
3 Years ago
;