1

我正在尝试做一个基于触摸的 HTML 应用程序，并在 iPad 2 上对其进行测试。但是，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>

itemindex当我在我的 PC 上的 Chrome/Safari 上运行它时，当我单击该项目时，我能够在控制台中看到正确的内容。

但是，在 iPad2 上，我得到了itemindexas <img>，这是正确的，0但万一itemIndex 作为错误返回。divp

TypeError：表达式'e.target.getAttribute'[undefined] 的结果不是函数

有人可以解释一下吗，也可以告诉我任何可用的解决方法。

4

1 回答 1

2

您需要对触摸设备使用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"));
}
于 2012-03-15T11:40:43.120 回答