Javascript 将ontouchstart中的代码传输到onmousedown

我正在编写一个主要针对iOS Safari的网站，但我也希望它能够响应普通桌面

因此，我需要让一个按钮在桌面上对onmousedown onmouseup事件做出反应&让一个按钮在iOS上对ontouchstart ontouchend做出反应

注意：我不能这样做（只需注册两个事件）：

虽然这将在桌面上工作，但在iOS上，图像src不会改变，这与iOS模拟的事件顺序有关

因此，我试图将ontouchstart中的javascript转换为onmousedown，但当我按下按钮时，出现错误“eles[I]未定义”，元素存在并具有正确的ID：

function enableDesktopGestures()
{
  var eles = new Array(document.getElementById("topicIndex"),
                       document.getElementById("volumeToggle"),
                       document.getElementById("exitModuleBt"),
                       document.getElementById("prevBt"),
                       document.getElementById("nextBt"));

  for (var i=0; i<eles.length; i++)
  {
     eles[i].addEventListener("mousedown", function() { eles[i].getAttribute("ontouchstart"); }, false);
     eles[i].addEventListener("mouseup", function() { eles[i].getAttribute("ontouchend"); }, false);
  }
}

// No error occurs with this but when I press the buttons nothing happens
function enableDesktopGestures()
{
  var eles = new Array(document.getElementById("topicIndex"),
                       document.getElementById("volumeToggle"),
                       document.getElementById("exitModuleBt"),
                       document.getElementById("prevBt"),
                       document.getElementById("nextBt"));

  for (var i=0; i<eles.length; i++)
  {
     var down = eles[i].getAttribute("ontouchstart");
     var up   = eles[i].getAttribute("ontouchend");  
     eles[i].onmousedown = function() { down; };
     eles[i].onmouseup   = function() { up; };
  }
}

功能启用桌面手势（）
{
var eles=新数组（document.getElementById（“topicIndex”），
document.getElementById（“卷切换”），
document.getElementById（“exitModuleBt”），
document.getElementById（“prevBt”），
document.getElementById（“nextBt”）；
对于（var i=0；i第二个示例中的问题是，添加的侦听器会产生以下代码（或类似代码）：

像下面这样设置onmousedown属性似乎对我有用，但是您可能仍然会遇到事件顺序问题

eles[i].onmousedown = down;

第一个示例有点奇怪。如果从定义的侦听器范围内读取for循环中i迭代器的值，它将具有eles数组的长度值，这可能是因为侦听器代码在不同的范围内求值。范围修复：

for(var i = 0; i < eles.length; i++) {
  var curEl = eles[i];
  eles[i].addEventListener("mousedown", function() { curEl.getAttribute("ontouchstart"); }, false);
}

for（变量i=0；i

同样，在第一个示例中，您的代码应该失败，因为（与第一个示例一样）ontouchstart属性的值没有得到计算。使用eval包装属性值似乎是一个选项，但我认为这是相当危险的，除非您确定您完全控制了这些属性值（）…以防万一：

for(var i = 0; i < eles.length; i++) {
  var curEl = eles[i];
  eles[i].addEventListener("mousedown", function() { eval(curEl.getAttribute("ontouchstart")) }, false)
}

for（变量i=0；i

还有一个问题：当参考普通桌面时，您希望支持哪些浏览器？许多用户仍然使用IE<9，我了解到addEventListener方法不受支持：

在这种情况下，您可以使用第一个测试来确定addEventListener方法的存在性，否则就求助于attachEvent

一般来说，在页面加载时附加所有侦听器而不是从HTML复制它们不是更容易吗？
如果我理解正确，您希望在图像中设置两个事件（如果用户的浏览器是safari）或其他（如果不是）。我想您应该通过一些验证来验证哪个浏览器是正确的，然后设置事件…在Closes desc上找到一个参考描述上述怪癖：（参见示例5）同时：
for(var i = 0; i < eles.length; i++) {
  var curEl = eles[i];
  eles[i].addEventListener("mousedown", function() { curEl.getAttribute("ontouchstart"); }, false);
}

for(var i = 0; i < eles.length; i++) {
  var curEl = eles[i];
  eles[i].addEventListener("mousedown", function() { eval(curEl.getAttribute("ontouchstart")) }, false)
}