javascript getAttribute () не работает на iPad2 Safari - PullRequest
Новая
       30

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

1 голос
/ 15 марта 2012

Я пытаюсь создать сенсорное 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 Ответ

2 голосов
/ 15 марта 2012

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

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

Обновление

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

Например: 

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"));
}
...