javascript getAttribute() 在 iPad2 Safari 上不起作用答案

【问题标题】：javascript getAttribute() doesn't work on iPad2 Safarijavascript getAttribute() 在 iPad2 Safari 上不起作用
【发布时间】：2012-03-31 21:54:34
【问题描述】：

我正在尝试做一个基于触摸的 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 上，我将 <img> 的 itemindex 得到为 0，这是正确的，但在 div 或 p 的情况下，itemIndex 将作为错误返回。

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

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

【问题讨论】：

标签： javascript html ipad-2 touch-event getattribute

【解决方案1】：

对于触控设备，您需要使用touchend 而不是mouseup 事件。

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

更新

如果您需要将事件附加到document，您可以使用以下 sn-p 使用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"));
}

【讨论】：

我做到了 ;-) 抱歉，我忘了把它放在第一次编辑中，现在我已经添加了这一行。
您是否尝试将事件附加到特定元素，而不是文档？
我现在做了。document.getElementById("divElement").addEventListener('mouseup',onTouchReleased, true); document.getElementById("divElement").addEventListener('touchend',onTouchReleased, true); 和 <div id="divElement" itemindex="1">HELLO1</div> 但还是一样
console.log(e.target) 返回什么？
它返回 [object HTMLElement]。但是，如果我将上面的代码更改为document.getElementById("divElement").addEventListener('click',onTouchReleased, true); 而不是touchend，它似乎工作正常。