Search code examples
javascripthtmlipad-2touch-eventgetattribute

javascript getAttribute() doesn't work on iPad2 Safari

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.

Solution

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