Mouse Events and Touch Events, Mouse Enter

I ran into a little snag with my last batch of Shop Shark changes. If you try the application in your computer’s browser, using a mouse, you can select multiple items by holding your mouse button down in the checkbox of one item and dragging through the checkboxes of other items. It works just like the visibility buttons on layers in Photoshop, which is a feature I much enjoy.

Unfortunately, if you try the application in your iPhone’s browser, you won’t find the same functionality. You’ll still be able to select many items by tapping on checkbox after checkbox, but you can’t do it in one sweep. Which I finally decided was good enough for now.

The reason is the difference between mouse events and touch events. The iPhone uses a whole new set of events that let you take advantage of the touch screen interface, which is very cool. It seems they left a few things out, though. In this particular instance, it’s the mouseenter event. On a mouse-driven browser, Shop Shark listens for the mouseenter event on every checkbox and then checks to see if the mouse button is down. If it is, Shop Shark knows to either check or uncheck the box in question. But there isn’t a “touchenter” event. There is a touchmove event, which I tried to use to duplicate the functionality. The issue there is that the event doesn’t contain any information about which element it’s over when it’s moving, but only which element it began with.

So I finally decided it wasn’t worth the headache for now. In the future, I might try to rig up a way to find the element the touch event is moving through by referencing the x and the y, but that’ll have to wait.

Tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Trackback

  1. [...] Mouse Events and Touch Events, Mouse Enter [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>