jQuery touch events to emulate mouse events when on mobile device

Question

I have an areamap that, when the user moves the mouse over/out the different map area items, I show/hide an image next to the areamap image. I also capture the click on a map area item and perform some functionality. Now, I want to have this work for users on a device without a mouse (i.e. a finger).

The code I have for the mouse over/out/click is:

$('area[id^="maparea"]').mouseover(function () {
    // show image associated with this map area item
});
$('area[id^="maparea"]').mouseout(function () {
// hide image associated with this map area item
});
$('area[id^="maparea"]').click(function () {
    // select the image associated with the map area item
});

How can I have similar functionality with the touch events?

The click event should continue to work as is. It's the dynamic changing of the image as you move your finger around the area map (without lifting the finger) that I'm interested in.

Thanks in advance.

sdespont · Accepted Answer · 2012-11-17 18:19:54Z

1

You need to use specific touch library like

http://danielglyde.blogspot.co.uk/2012/08/touchit-jquery-plugin-for-touch-events.html

answered Nov 17, 2012 at 18:19

sdespont

14.1k9 gold badges61 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ed Sinek Over a year ago

Thx @sdespont. In the touch move event, it returns the X, Y of the current finger position. How can I translate that into (1) is the finger over the area map image and (2) which area map item corresponds to the X, Y coord?

Collectives™ on Stack Overflow

jQuery touch events to emulate mouse events when on mobile device

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related