12

The purpose of this question is to learn how to test JS event listeners for touch events on mobile devices.

mgabz
  • 673
  • 1
  • 9
  • 17

5 Answers5

20

While on Chrome, press F12 to toggle Developer Mode.

Then, on the top-left of the developer partial, you will see a small icon saying "Toggle Device Mode" (Ctrl/CMD + Shift + M)

enter image description here

Then, you can switch between devices at the top.

enter image description here

This will mimic touch gestures made by a real device.

StephenTG
  • 2,579
  • 6
  • 26
  • 36
Ariel Weinberger
  • 2,195
  • 4
  • 23
  • 49
  • I have just came across a situation when the functionality is working with the in-built touch emulator in Chrome, but it doesn't work in a real Android device, and I just wanted to point out this isn't replacing the actual mobile testing. The issue: https://stackoverflow.com/questions/37251486/bootstrap-v3-3-6-dropdown-not-working-with-mobile-menu – Gabor Nov 26 '21 at 12:14
  • Note that Safari has a responsive design mode which allows you to use the framework of an iPhone or iPad. However, Safari, even in the responsive design mode, always registers a mouse event. visit [here](https://stackoverflow.com/a/71216599/6026516) to detect the touch or mouse events on a web page. – Ramtin Feb 22 '22 at 06:15
4

If you go into Developer Tools (F12), enter responsive design mode (Ctrl + Shift + M) and select a touch-enabled device, you can change it so it triggers touch events when you interact with the page (rather than mouse events).

wilsonzlin
  • 2,154
  • 1
  • 12
  • 22
  • Sorry didn't mean to downvote - finger slipped :/ will reverse it when the question becomes unlocked – mzmm56 Dec 20 '18 at 17:53
3

I would recommend Hammerjs's touch emulator. It gets you touch events like Chrome, but also multitouch events (pinch in particular). It's easy to install on your page while developing. I'm using it to test stuff written in Fulcro (React). Works perfectly.

Tony K.
  • 5,535
  • 23
  • 27
  • The bookmarklet on the linked page uses rawgit.com, which ["will soon shut down"](https://rawgit.com/). Replacing `cdn.rawgit.com` in the bookmarklet by `raw.githubusercontent.com` doesn't work for some reason. How can that be? Wrong MIME type or something? – root Dec 21 '22 at 02:13
1

Open up the devtools and on the topleft corner there's an icon with a screen behind a phone. Click it to enable phone mode. You will know you are in phone mode because the page will be smaller and a circle will appear where your cursor was. Clicking will simulate a touch event.

Cameron637
  • 1,699
  • 13
  • 21
0

First make sure your devtools is simulating touch ( In chrome , enter responsive mode and choose a mobile device). After that, this is how it works: There are 4 touch events: touchstart, touchmove, touchend,touchcancel. If you want to simulate touchmove (ie click and move while finger is down) then you add an event listener to either the window or an element, and every firing of that event will trigger the callback you assign. The callback will receive the event as a whole , and it's a good idea to start off by console.log()-ging the whole event and seeing what is useful to you inside it.

For example a touchmove event will have an array called touches which will contain objects called touch. If there are 2 fingers down there will be two items in the array, each with a pageX and pageY property which would give you the position of that finger(although one can't simulate more than one finger in devtools - so you'd have to just use the first item([0]).

window.addEventListener("touchmove", (event) => { do something with event);

Sharkfin
  • 128
  • 1
  • 7