Would onClick event work on touch on touch-screen devices?

Question

I've used onclick events in my website. But when I open it in google chromes' developer mode's mobile view, nothing happens on touch on the elements which work on click with mouse. So my question is:

Do I have to also add ontouch events along with onclick events, or onClick event work on touch on all touch-screen devices?

P.S: You can see all of my codes here: https://github.com/SycoScientistRecords/sycoscientistrecords.github.io/

Or at the live website: http://sycoscientistrecords.github.io

And no I haven't tested the website on real phone.

I've never had problems with `onClick` on touch devices. Have you actually tried this with a real phone/device with touch-screen, or only Chrome's developer mode's mobile view? — ROAL, May 17 '16 at 10:12
Maybe you have another element overlapping and blocking the click event when the screen is that small? Do you have an example you can show? — James, May 17 '16 at 10:14

score 14 · Answer 1 · edited May 06 '17 at 17:29

14

onclick works fine on touchscreens; I've used it several times and have never had any problem.

You could consider using onmousedown instead of onclick. Or use jQuery to detect taps.

edited May 06 '17 at 17:29

illright

3,991
2
29
54

answered May 17 '16 at 10:18

Mueyiwa Moses Ikomi

1,069
2
12
26

1

Why should I use `onmousedown` instead of `onclick`? – user31782 May 17 '16 at 10:21
1

onmousedown is equivalent to ontouchstart on touchdevices, and the equivalent of onmouseup is ontouchend. If you would also like to detect dragging, you could use ontouchmove which is fired every time you move your finger after touching the screen. – Mueyiwa Moses Ikomi May 17 '16 at 10:25

score 2 · Answer 2 · answered Jul 27 '21 at 14:59

I found this detailed writeup at MDN very helpful. In particular:

the browser may fire both touch events and mouse events in response to the same user input [emphasis mine]

and

the element's touch event handlers should call preventDefault() and no additional mouse events will be dispatched

So, your touchstart or touchend listener can call evt.preventDefault() and your mousedown / mouseup listeners won't fire because they come later in the chain.

In Angular, I was able to detect whether I'd clicked a button using my mouse or my laptop's touchscreen, by changing (click)="doSomething()" to (mouseup)="doSomething(false)" (touchend)="doSomething(true); $event.preventDefault()". The method is called with true for touch events and false for mouse events.

score 0 · Answer 3 · answered Nov 24 '20 at 10:24

0

onclick may not work on touch devices, I had this issue and the event ontouchstart sorts it. if you use ontouchstart and onclick watch that you don't trigger the event twice.

this is another post related onClick not working on mobile (touch)

answered Nov 24 '20 at 10:24

Fran Yo Mismo

1

score 0 · Answer 4 · answered Feb 22 '22 at 06:29

New browsers have a pointerType which determines if the onClick is made by a mouse or via a touch. If you just want make adjustments in user behavior based on the input, using pointerType is the safest way.

if you are using jQuery:

$(selector).click(e => {
    if (e.pointerType === "mouse") {} // mouse event
    else {} // touch event
});

if you are using vanilla JS:

element.addEventListener('click', e => {
    if (e.pointerType === "mouse") {} // mouse event
    else {} // touch event
});

If you are using React, the event is wrapped around a synthetic event. To access the pointerType, you have to use the nativeEvent of the react event. Here is what you need to consider (especially if you are using Typescript). If the event is triggered by a mouse, the native event is an instance of MouseEvent which does not have pointerType, so, first you need to check the type of native event which will also take care of the typing problems in TS

<div
    onClick={e => { 
        if (e.nativeEvent instanceof PointerEvent && e.nativeEvent.pointerType === 'touch') {} // Touch Event
        else {} // Mouse Event
    }}
></div>

Pro tip: If you want to test the touch event in development, use Chrome following this. Note that Safari has a responsive mode which simulates the framework of iPhones and iPads. However, Safari always registers a mouse event even when you are in responsive design mode and have selected an iPhone or iPad.

Would onClick event work on touch on touch-screen devices?

4 Answers4

Linked

Related