javascript getAttribute() doesn't work on iPad2 Safari

Question

I'm trying to do a touchBased HTML application, and was testing it on iPad 2. However, there seems to be some issue with the custom attributes in HTML.

here is my code

<!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>

when i run it on Chrome/Safari on my PC, i'm able to see the correct itemindex in the console when i click on the item.

However, on iPad2, i get the itemindex of <img> as 0, which is correct, but in case div or p the itemIndex is returned as an Error.

TypeError: Result of expression 'e.target.getAttribute'[undefined] is not a function

Can someone explain this please, and also enlighten me on any workaround available.

antyrat · Accepted Answer · 2012-03-15T12:41:38.443

2

You need to use touchend instead of mouseup event for touch devices.

Touch based devices didn't support many mouse events such as mouseup, mousedown, mousemove, mouseover, mouseout but supports click event. You can try your code with click event too.

Update

If you need to attach event to the document you can use following snippet using elementFromPoint function

For example:

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

edited Mar 15 '12 at 12:41

answered Mar 15 '12 at 11:40

antyrat

27,479
9
75
76

i did that ;-) sorry i forgot to put that in the first edit, now i've added the line. – Tirtha Mar 15 '12 at 11:43
Did you try to attach event's to specific elements, not document? – antyrat Mar 15 '12 at 11:45
i did now.`document.getElementById("divElement").addEventListener('mouseup',onTouchReleased, true); document.getElementById("divElement").addEventListener('touchend',onTouchReleased, true); ` and `
HELLO1
` but it is still the same – Tirtha Mar 15 '12 at 11:58
and what `console.log(e.target)` returns? – antyrat Mar 15 '12 at 12:00
it returns [object HTMLElement]. However, if i change the above code to `document.getElementById("divElement").addEventListener('click',onTouchReleased, true);` instead of `touchend`, it seems to work fine. – Tirtha Mar 15 '12 at 12:08
it doesn't actually. The original implementation has got many text elements and is a very dynamic environment. so attaching the event to each element is impossible. also, `click` is not a solution, because i plan to implement swipe action also. but your approach is immensely helpful and it'll help me to explore other ways(if any other way exists) – Tirtha Mar 15 '12 at 12:36

javascript getAttribute() doesn't work on iPad2 Safari

1 Answers1