javascript getAttribute(）没有'无法在iPad2 Safari上工作

javascript getAttribute() doesn't work on iPad2 Safari

本文关键字：iPad2 Safari 工作 getAttribute 没有 javascript      更新时间：2023-09-26

我正在尝试制作一个基于触摸的HTML应用程序，并在iPad2上进行了测试。然而，HTML中的自定义属性似乎存在一些问题。

这是我的代码

<!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上，我将<img>的itemindex作为0，这是正确的，但在div或p的情况下，itemIndex将作为错误返回。

TypeError:表达式"e.target.getAttribute"[未定义]的结果不是函数

有人能解释一下这一点吗？也可以启发我任何可用的变通方法。

触摸设备需要使用touchend事件，而不是mouseup事件。

基于触摸的设备不支持许多鼠标事件，如mouseup、mousedown、mousemove、mouseover、mouseout，但支持click事件。您也可以使用click事件来尝试您的代码。

更新

如果您需要将事件附加到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"));
}
相关文章：