Mouse events in mobile safari on the iPhone and iPad

There are lots of nifty things we can do in javascript in the web browser, and one of those nifty tricks was to allow users to drag-to-resize elements on a dashboard in my main line-of-business web app. This is really handy for the users as not only can they add whichever graphs they might need, but they can resize them to suit. To handle this resizing I wrote a few javascript functions to handle the mousedown, mousemove and mouseup events when the user grabs the bottom right corner of a box and drags it around.

I then tried the app on an iPad to see how it behaved, and the graphs on the dashboard all displayed brilliantly, but I couldn’t for the life of me get it to drag-to-resize. A bit of investigation shows that the touch-based mobile safari doesn’t raise the mousemove event at all, probably because holding down a finger and moving it is used for scrolling, and apart from the location or zoom changing the browser isn’t aware that anything has happened.

Normally with this sort of thing there is some kind of workaround that you can do, but in this case the browser literally doesn’t raise events so there really isn’t anything that can be done, at least not with dragging. For now this will just have to be a known limitation on touch based interfaces. If I really wanted to make it work I would have to subscribe to mousedown on the drag panel to initiate a resize, and then watch for a mousedown somewhere else on the parent container to indicate this is where the new bottom right corner should be. Not at all intuitive or elegant, but probably the only method of doing it in a mousemove-less environment.

 

Here is the apple developer guide that explains what javascript events are raised in mobile safari: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

so, to sum it up, if your page has javascript to do any of the following things, it likely won’t work as expected on an iphone or ipad:

 

  1. Mouse events (Move, over, out etc)  over a non-input element (apple has a workaround for this one, see below)
  2. Double Click on an element
  3. Scrolling (apple says it will raise scroll event if user does a 2-finger pan gesture, but given then most pages simply expand vertically rather than showing a scrollable element this is of limited use)
the workaround for the mouse events, apple handily tells you in the link above that it will work if you make the element clickable, meaning it has an onclick attribute. They suggest adding onclick=”void(0)” as a dummy onclick hander so that mobile safari recognises the element as clickable and will then raise the events.
If you are developing specifically for mobile safari then Apple gives us some specific touch events to work with, but I would be hesitant to make mobile-safari specific pages as that defeats the platform-independent reason for using html in the first place:
<div
  ontouchstart="touchStart(event);"
  ontouchmove="touchMove(event);"
  ontouchend="touchEnd(event);"
  ontouchcancel="touchCancel(event);"
></div>
Advertisements
This entry was posted in Javascript, Web Devleopment and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s