Question

我正在尝试做一个基于touchBased的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>

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

但是，在iPad2上，我得itemindex <img>为0，这是正确的，但如果div或p，则itemIndex为作为错误返回。

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

有人可以解释这一点，也可以了解任何可用的解决方法。

Answer 1

您需要使用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"));
}

javascript getAttribute（）在iPad2 Safari上不起作用

1 个答案: