Как заставить HTML5 JavaScript Canvas распознавать касание / касание с iphone / ipad?

У меня очень простая игра HTML5, которая работает должным образом в обычном браузере, но при доступе к ней из браузера на iPhone или iPad она не распознает событие щелчка или событие touchstart.

Исходный код взят из руководства, расположенного здесь: http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/

Я изменил его и добавил событие щелчка, которое переместит смайлик туда, куда вы щелкнете на холсте. Это событие щелчка отлично работает в браузерах Mac и Windows с помощью мыши: http://iwebss.com/test

Но если вы обращаетесь к нему с iPhone или iPad, событие щелчка не работает. Я также попытался добавить дополнительный слушатель для сенсорного запуска, который тоже не работает.

Это новые слушатели, которые я добавил в код:

    addEventListener("click", mouseClickEvent, false);
    function mouseClickEvent(e) {
        alert("click event");
            mouseClick = true;
        if (e.offsetX) {
              mouseX = e.offsetX;
              mouseY = e.offsetY;
            }  else if(e.layerX) {
              mouseX = e.layerX;
              mouseY = e.layerY;
            }
    }

    addEventListener("touchstart", testEvent, false);
    function testEvent(e) {
        alert("touchstart event");
    }

Есть идеи о том, что я делаю не так, или как читать события касания iPhone и iPad?

РЕДАКТИРОВАТЬ: Я также пробовал событие mousedown, которое также не работает.

РЕШИЛИ: разобрался ... см. Мой ответ ниже.


ios javascript html dom-events html5-canvas
person jsherk    schedule 24.06.2012    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Присоединяемые обработчики:

ontouchstart - a finger goes down.
ontouchmove - a finger moves.
ontouchend - a finger goes up.

ongesturestart - a scale or a rotation starts.
ongesturechange - a scale or a rotation.
ongestureend - a scale or a rotation ends.

Несколько метатегов для iOS, а также другая информация здесь.

person Anirudh Ramanathan    schedule 25.06.2012
comment
Однако в самом javascript вы не используете on part ... поэтому для обработчика onclick в javascript вы просто используете click, а для ontouchstart в javascript вы просто используете touchstart. - person jsherk; 25.06.2012
comment
да. Я добавил обработчики к кнопкам ontouchstart = и т.д. Думаю, он отказывается работать, когда также указан атрибут href. Итак, я использовал JS, чтобы очистить атрибут HREF и добавить эту информацию в ontouchstart для всех ссылок. Это заработало. - person Anirudh Ramanathan; 25.06.2012

arrow_upward
3
arrow_downward

Хорошо, я разобрался ... хотя прослушиватель событий работает в обычном браузере, для iphone / ipad вам нужно специально прикрепить его к холсту.

Итак, в моем примере у меня есть:

var canvas = document.createElement("canvas");

Таким образом, это работало в обычных браузерах, но НЕ на iphone / ipad:

addEventListener("click", mouseClickEvent, false);

РЕШЕНИЕ: Вот что мне нужно было сделать, чтобы заставить его работать на iphone / ipad (добавьте холст впереди):

canvas.addEventListener("click", mouseClickEvent, false);

Это также сработало для события touchstart!

В качестве примечания, мне интересно, имеет ли значение, используете ли вы сенсорный запуск или событие щелчка на iphone?

person jsherk    schedule 25.06.2012