Question

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

所以我需要在桌面和桌面上制作一个按钮来响应onmousedown onmouseup上的事件。一个按钮，以响应iOS上的ontouchstart ontouchend。

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

<img id="button" onmousedown="this.src=''" onmouseup="this.src=''; doSomething();" ontouchstart="this.src=''" ontouchend="this.src=''"

虽然这可以在桌面上使用，但在iOS上，图像src不会改变，这与iOS模仿的事件顺序有关。

所以我试图将ontouchstart中的javascript转移到onmousedown但是当我按下按钮时，我得到错误“eles [i]未定义”，元素EXIST＆amp;拥有正确的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; };
  }
}

Answer 1

第二个示例中的问题是您添加的侦听器会产生以下代码（或类似的东西）：

function() { "valueOfontouchstartAttribute"; }

设置如下所示的onmousedown属性似乎对我有用，但是您可能仍会遇到事件顺序问题。

eles[i].onmousedown = down;

第一个例子有点古怪。如果你从你定义的监听器范围内读出for循环中的i-iterator的值，它将具有eles数组长度的值，这可能是因为你的监听器代码是用不同的方式计算的范围。范围修复：

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

同样在第一个示例中，您的代码应该失败，因为（就像在第一个示例中一样）ontouchstart属性的值不会被评估。用eval包装属性值似乎是一个选项，但我认为这是非常危险的，除非你确定你完全控制这些属性值（When is JavaScript's eval() not evil?）...以防万一：< / p>

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

还有一个问题：在引用普通桌面时，您希望支持哪些浏览器？许多用户仍然使用IE＆lt; 9，我读不了addEventListener方法然后不支持： addEventListener is not working

在这种情况下，您可以使用第一个测试来确定是否存在addEventListener方法，然后再使用attachEvent。

一般来说，在页面加载时附加所有侦听器而不是从HTML中复制它们会不会更容易？

将ontouchstart中的代码转移到onmousedown

1 个答案: