Home/ Questions/Q 7634977
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T07:19:23+00:00

I’m trying to do a touchBased HTML application, and was testing it on iPad

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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