javascript getAttribute() doesn't work on iPad2 Safari

StackOverflow https://stackoverflow.com//questions/9718915

質問

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.

役に立ちましたか？

解決

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"));
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top