将ontouchstart中的代码转移到onmousedown中

Transfer code in ontouchstart into onmousedown

本文关键字：onmousedown 转移 ontouchstart 代码      更新时间：2023-09-26

我正在编写一个主要针对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模仿事件的顺序有关。

所以我试图将javascript在ontouchstart转移到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; };
  }
}

第二个示例中的问题是，您添加的侦听器导致以下代码(或类似的代码):

function() { "valueOfontouchstartAttribute"; }

像下面这样设置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);
}

同样在你的第一个例子中，你的代码应该失败，因为(像在第一个例子中)ontouchstart属性的值没有得到评估。用eval包装属性值似乎是一种选择，但我想说，这是相当危险的，除非你确定你完全控制了这些属性值(javascript的eval()什么时候不是邪恶的?)．.. 以防万一:

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

还有一个问题:当提到普通桌面时，您希望支持哪种浏览器?许多用户仍在使用IE <9，我读addEventListener方法，然后不支持:addEventListener不工作

在这种情况下，您可以使用addEventListener方法是否存在的第一个测试，否则退回到attachEvent。

一般来说，在页面加载时附加所有侦听器而不是从HTML中复制侦听器不是更容易吗?
相关文章：