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?

PS: 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.

Answer 1

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.

Answer 2

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)

Answer 3

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.

Answer 4

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.