iPad Safari : mouse-to-touch event-mappings with -webkit-user-select:none

27 views
Skip to first unread message

tr888

unread,
Jun 17, 2010, 8:02:24 AM6/17/10
to iPadWebDev
I am trying to find out what, if anything, happens to the mouse-to-
touch event mapping/emulation when an element has -webkit-user-
select:none CSS applied to it. I looked at the iPad at the Apple
store recently before discovering -webkit-user-select:none, so I don't
know the full effects of this CSS. Maybe I'll have a iPad soon :-)

Before the above CSS was applied to the AREA, this is the behavior I
noticed on the iPad at the Apple store:

1. The web page has both an onMouseOver and a click eventhandler on
the AREAs of the image-map.
2. When user taps on an area (i.e. finger-down and then rapidly up,
just like a mouse-click) the onMouseOver event is fired but the click
event is suppressed. This causes the tooltip to be displayed and
remain there until another area of the image is tapped.
3. When the user touches down on an area and keeps the finger there,
the area is selected.

While I understand that this is the touch world not the mouse world,
such rendering of a "legacy" web page by Safari is rather clunky and
arbitrary -- that's not how tooltips are supposed to work, and the
click event is gone. iPad Safari's "standard" emulation of mouse
events (i.e. standard = where you are attaching eventhandlers to
onMouseOver and Click rather than intercepting the touchstart,
touchmove, touchend events at a lower level) really requires the
developer to choose between mouse-over and click eventhandlers. And
it breaks many an existing web page.

I'd like to have both a tooltip for when the element is touched that
would say what it is, or say what will happen if you tap on it; and a
dialog that is opened by a tap on the element that would give the user
much more detailed information about it.

Apple iOS makes the touch a select, but perhaps Safari gives the
developer a way to disable that mapping so that touching an element on
screen becomes the counterpart to 'hover'. Maybe -webkit-user-
select:none is a simple way to cause this behavior? I haven't been
able to get back to the Apple store to check it out.
Does disabling user-select in CSS change the way Safari simulates
mouse events on elements with both onMouseOver and Click handlers?
Does the click event fire?

Thanks

Reply all
Reply to author
Forward
0 new messages