Может ли кто-нибудь сказать мне окончательно, поддерживают ли карты изображений html события касания в Mobile Safari? Мне нужно использовать карты изображений, потому что у меня есть кликабельные области неправильной формы. Мое тестирование показывает, что события мыши поддерживаются (но ограниченным образом), а события касания вообще не срабатывают.
Я сделал этот самый простой тест:
<img id="polygon_images" src="http://s18.postimg.org/7xvo1f9tl/polygons.png" alt="Polygons" border="0" usemap="#my_polygons" />
<map id="my_polygons" name="my_polygons">
<area shape="poly" alt="blue" title="Mouse" coords="95,40,171,99,139,189,37,188,14,96" onmousedown="writeMessage(event, 'm-down');" onmouseup="writeMessage(event, 'm-up');" onmousemove="writeMessage(event, 'm-move');" onmouseout="writeMessage(event, 'm-out');" />
<area shape="poly" alt="red" title="Touch" coords="269,42,345,96,317,191,215,189,193,97" ontouchstart ="writeMessage(event, 't-start');" ontouchend="writeMessage(event, 't-end');" ontouchmove="writeMessage(event, 't-move');" ontouchcancel="writeMessage(event, 't-cancel');" />
</map>
<div id="message_box"></div>
Синий многоугольник настроен на события мыши. Красный многоугольник предназначен для сенсорных событий.
Когда я просматриваю эту страницу в обычном Safari, щелчок или наведение курсора на синий многоугольник запускает события, как я и ожидал. И, конечно же, красный многоугольник ничего не делает (поскольку на десктопе сенсорные события не поддерживаются)
Однако, когда я просматриваю эту страницу на своем iPad, синий многоугольник запускает тройку движений мыши, опускания мыши, подъема мыши при одном нажатии и больше ничего. Что еще хуже, прикосновение к красному многоугольнику ничего не дает!
Я очень надеюсь, что я просто пропустил что-то простое, но если нет, мне бы очень хотелось точно знать, что происходит.
