10

This might seem like a really dumb question, but I am writing an application and I have come across where my mouse-over, mouse-click and mouse-hover need different events bound to them. Now on Internet Explorer, Firefox, and Safari. It all works as expected.

However, on my iPhone the actions will not trigger. Now my question is are their any specific ways I can have the Mouse-Over essentially be fired when I hold my finger down and trigger an event?

An example where this doesn't work is right on this website when you hover over a comment it is supposed to display the +1 or flag icon.

I am using jQuery.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Andrew
  • 3,524
  • 5
  • 35
  • 50
  • 1
    This topic is also explained in http://stackoverflow.com/questions/4550427/prefered-alternative-to-onmouseover-for-touch – Nelson Feb 02 '12 at 10:22

7 Answers7

29

The answer is in the documentation that Remus posted. If you add an onclick = "void(0)" declaration, you will instruct Mobile Safari that the element is clickable, and you will gain access to the mouseover event on that element.

More info here

Hal
  • 1,173
  • 12
  • 11
  • Thanks. I inherited a site with a CSS only, hover based menu system, and adding this to each element made it work. – Matthew Lock Jul 16 '12 at 02:17
  • Can this be marked as the answer so to help others? – Hal Aug 03 '16 at 20:06
  • Thanks! Still working! Got stuck on Safari not working with my 'mouseover' event listeners. Used this trick and now the 'mouseover' listeners are triggering with a touch. – skaz Oct 31 '18 at 00:14
15

I think you need to reconsider your design for the iPhone (and any mobile for that matter). iPhone web interfaces shouldn't depend on mouse-overs and hovers, as they just complicate the interface significantly.

I strongly recommend that you design a new interface that is optimized for mobile viewing, that don't require clicking on small tiny arrows just to show more options.

notnoop
  • 58,763
  • 21
  • 123
  • 144
  • Hmm, it always seemed to me that apple really pushed for all kinds of different touching abilities. I guess if this is the case then maybe I will have to use like a third party frameworks, I wonder if those handle my case. I have seen things that preform swipe on the web. – Andrew Nov 30 '09 at 23:58
  • 1
    Yes the iPhone handles all kinds of different multitouch gestures such as swipe and pinch. It also makes available a multitouch API. However, no software can make a capacitive touch screen sense the presence of your finger from a centemeter away. – Breton Dec 01 '09 at 00:04
  • 1
    This is not an answer to the question, @Hal's answer should be marked as the answer. – Roman Holzner May 05 '14 at 09:39
5

Mobile Safari has no mouse and hover events (at least not in the usual accepted sense), they are explicitly called out in Creating Compatible Web Content Unsupported iPhone OS Technologies:

Mouse-over events The user cannot “mouse-over” a nonclickable element on iPhone OS. The element must be clickable for a mouseover event to occur as described in “One-Finger Events.”

Hover styles Since a mouseover event is sent only before a mousedown event, hover styles are displayed only if the user touches and holds a clickable element with a hover style. Read “Handling Events” for all the events generated by gestures on iPhone OS.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Remus Rusanu
  • 288,378
  • 40
  • 442
  • 569
  • I'm not sure I even agree with Apple's wording on this. The documentation you quote, at once, says they are not supported in the title of this section of the doc, but then caveats with the cases where they are supported in the text of that section. – George Sisco Jan 25 '13 at 18:06
2

Yeah...I don't think anyone posing the question actually expected the device to "sense" a hover or mouseover. Actually you'd have to be pretty arrogant to assume someone actually meant that. Some method of triggering those event handlers is what is desired. I can definitely see a use for them in "hint" text appearing above items.

And whomever said not using mouse events makes a cleaner, simpler experience is taking their own opinion a bit too seriously. Those can greatly enhance a web page/application experience or make them worse. It's a matter of prudent usage.

The only answer anyone provided here worthwhile is whomever said it is best to have an alternate site optimized for mobile. Or possibly use a content management system that generates the page based on the browser type (similar to how Wikipedia works).

James
  • 21
  • 1
1

Congratulations on discovering the first thing about touch screen UI design. The bad news, is that what you want just is not going to happen.

The good news is that this will force you to make a much easier interface, for both iphone users and regular web users.

Breton
  • 15,401
  • 3
  • 59
  • 76
  • humm, mouseover not good for clean user interfaces, there are many use cases where it is great, charts with hover for the data at that point is just one. – nodrog Aug 28 '12 at 10:24
  • Yeah, you should look at the "Super Loupe" feature of Diet Coda: http://www.macstories.net/stories/diet-coda-from-an-ipad-bloggers-perspective/ – George Sisco Jan 25 '13 at 18:14
0

You simply cannot have a mouseover or hover functionality on touch screen devices, unless you can move a virtual pointer (though no touch UI offer that kind of functionality), but that would defeat the point of a touch screen UI.

Touch screen UI's are a paradigm shift and retro-fitting mouse-pointer UI interfaces back into touch UI design only limits and damages your solution.

Wim
  • 11,998
  • 1
  • 34
  • 57
  • I don't mean to carpet bomb, and I won't after this comment, but you should also look here, at the "Super Loupe" feature of Diet Coda: http://www.macstories.net/stories/diet-coda-from-an-ipad-bloggers-perspective/ – George Sisco Jan 25 '13 at 18:15
-1

Writing a mousehandler in javascript seems fairly straightforward, although I can imagine it being easy to get a lot of edge cases wrong.

The good news is, someone wrote a javascript mouse-handler/emulator whatever -- as a bookmarklet. It's called iCursor (not to be confused with the pointless mac app of the same name).

The bad news is, the guy's site (icursor.mobi) has gone off the air, and I can't find a copy, so I can't tell you how well it works. Here's a review (because I can only post one link):

What apple should have done for the iPhone/iPad was make one-finger panning move a virtual mouse pointer, and two-finger panning move within the viewport (as one-finger does now).

Two finger panning is easy; the only reason I can imagine for Apple not doing this is that they actually wanted to break 50% of the websites in the world. Seriously. It's right up there with the evil manipulative attempts to break standards that Microsoft has been doing all these years.

You're a web developer. What do you hate most? Internet Explorer. Because of all the extra headaches it causes you. Well, Stevie had to have his "me too" moment, and you're going to pay for it.

n00begon
  • 3,503
  • 3
  • 29
  • 42
Nick Papadakis
  • 1