Я использую Google closure для создания простой интерактивной графики в HTML / JS для просмотра на iPad Safari.
Пример кода ниже показывает ожидаемое поведение на Safari Mac и во всех других основных браузерах (появляется кружок, который при нажатии генерирует консольное сообщение), но не на Safari iPad. Ни один обработчик событий не зарегистрирован в круге. Вместо этого выдается ошибка.
goog.require('goog.graphics');
goog.require('goog.events.EventType');
goog.require('goog.graphics.Stroke');
goog.require('goog.graphics.SolidFill');
var showCircle = function() {
var graphics = goog.graphics.createGraphics(400, 400);
var stroke = new goog.graphics.Stroke(1, 'black');
var fill = new goog.graphics.SolidFill('#00ff00', 0.5);
var circle = graphics.drawEllipse(100, 100, 30, 30, stroke, fill);
var element = goog.dom.getElement('demo');
graphics.render(element);
console.info(circle.getElement());
goog.events.listen(circle, goog.events.EventType.MOUSEDOWN, function(e) {
console.info('mousedown');
});
};
Ошибка читает (выброшенный из base.js):
Ошибка JavaScript в строке 804 ... Ошибка типа: Результат выражения 'obj' [null] не является объектом.
Я думаю, что я проследил проблему до отсутствия элемента DOM для круга и того факта, что регистрация слушателя в круге пытается зарегистрировать слушателя в circle.getElement (). При запросе circle.getElement () возвращает null, объясняя ошибку. Обратите внимание, что на iPad Safari выводимое на консоль сообщение печатается как ноль, но:
<ellipse cx="100" cy= "100" rx="30" ry="30" stroke="black" stroke-width="1" fill= "#00ff00" fill-opacity="0.5">
в Mac Safari.
На Mac и iPad Safari круг нарисован одинаково. Единственная разница - ошибка. Использование «touchstart» в качестве имени события вместо goog.events.EventType.MOUSEDOWN не имеет значения.
Я хочу зарегистрировать прослушиватель событий с кружком без
ошибка генерируется на iPad. Как я могу это сделать?