2012-03-15 4 views
1

Я пытаюсь сделать приложение HTML с сенсорным основанием и тестировал его на iPad 2. Однако, похоже, проблема связана с пользовательскими атрибутами в HTML.javascript getAttribute() не работает на iPad2 Safari

вот мой код

<!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» [неопределенными] не является функцией

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

ответ

2

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

устройства на базе

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

Update

Если вам нужно прикрепить событие к 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")); 
} 
+0

я сделал это ;-) извините я забыл чтобы поместить это в первое редактирование, теперь я добавил строку. – Tirtha

+0

Вы пытались присоединить события к определенным элементам, а не к документу? – antyrat

+0

i did now.'document.getElementById ("divElement"). AddEventListener ('mouseup', onTouchReleased, true); document.getElementById ("divElement"). AddEventListener ('touchhend', onTouchReleased, true); 'и'

HELLO1
', но он все тот же – Tirtha

Смежные вопросы