javascript getAttribute() не работает на iPad2 Safari

Я пытаюсь создать сенсорное HTML-приложение и тестирую его на iPad 2. Однако, похоже, что есть некоторые проблемы с пользовательскими атрибутами в HTML.

вот мой код

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">

document.addEventListener('mouseup',onTouchReleased, true);
document.addEventListener('touchend',onTouchReleased, true);

function onTouchReleased(e) {
// Capture the event
if(e.preventDefault)
    e.preventDefault();
if(e.stopPropagation)
    e.stopPropagation();
console.log(e.target);
console.log(e.target.getAttribute("itemindex"));
}
</script>
</head>
<body>
<img itemindex="0" src="video.jpg"/>
<div itemindex="1">HELLO1</div>
<p itemindex="2">HELLO2</p>

</body>
</html>

когда я запускаю его на Chrome/Safari на моем ПК, я вижу правильное itemindex в консоли, когда я нажимаю на элемент.

Однако на iPad2 я получаю itemindex из <img> как 0, что правильно, но на всякий случай div или же p itemIndex возвращается как ошибка.

TypeError: Результат выражения 'e.target.getAttribute'[undefined] не является функцией

Может кто-нибудь объяснить это, пожалуйста, а также просветить меня на любой доступный обходной путь.

Источник

1 ответ

Решение

Вам нужно использовать touchend вместо mouseup событие для сенсорных устройств.

Сенсорные устройства не поддерживают много событий мыши, таких как mouseup, mousedown, mousemove, mouseover, mouseout но поддерживает click событие. Вы можете попробовать свой код с click событие тоже.

Обновить

Если вам нужно прикрепить событие к document Вы можете использовать следующий фрагмент, используя функцию elementFromPoint

Например:

function onTouchReleased(e) {
    // Capture the event
    if(e.preventDefault)
        e.preventDefault();
    if(e.stopPropagation)
        e.stopPropagation();
    var touch = e.touches[0];
    var pointTarget = document.elementFromPoint( touch.pageX, touch.pageY );
    console.log(pointTarget);
    console.log(pointTarget.getAttribute("itemindex"));
}
Источник
Другие вопросы по тегам