Я делаю простую мобильную веб-страницу, на которой у меня есть изображение с картой изображения. Я хочу, чтобы изображение менялось, когда пользователь касался изображения, и менялось обратно, когда пользователь поднимал палец. Изображение разбито на 3 части, и изображение, на которое оно переключается при касании, зависит от того, к какой из 3 областей они прикоснулись.
Моя проблема в том, что я не могу запустить событие touchstart для области карты изображения на IOS или Android. Если я использую onmousedown, он работает правильно, но IOS, похоже, не запускает это событие до тех пор, пока пользователь не поднимет палец, что не работает для меня. Я могу заставить ontouchstart работать, если я слушаю его в div или изображении, поэтому я знаю, что мои обработчики событий и т. д. верны.
Кто-нибудь знает, как я могу заставить мою карту изображений правильно запускать события касания или другой элемент html, который может выполнить то же самое?
<html>
<head><title>Touch Test</title></head>
<body>
<script type="text/javascript">
//the handler I want to fire
function onTouchStart(e){
alert('touch me more');
}
</script>
<div style="height:250px">
<div id="log"></div>
<div id="logDetails"></div>
<!--If I dont have the image map over the image, this ontouchstart fires properly-->
<img src='img/nbsLogo.png' ontouchstart="onTouchStart(event)" usemap='#imageMap'/>
<!--The touch event fires on this div properly as well-->
<!--<div id="box" style="height:225px;width:225px;background:red;position:absolute;" ontouchmove="touchMove(event)" ontouchstart="onTouchStart(event)"></div> -->
</div>
<map id='imageMap' name='imageMap'>
<!-- This touch event never fires. If I make it onmousedown, it fires properly, but only after the user has lifted their finger-->
<area id='coldDark' title='coldDark' shape='rect' ontouchstart='onTouchStart(event)' coords='0,0,361,272'>
</map>
</body>
</html>
Любая помощь приветствуется
Спасибо
