Question

I am programming a website mainly targetted at iOS Safari, but I also want it to respond to normal desktops.

So I have a need to make a button react to the events onmousedown onmouseup when on a desktop & for a button to react to ontouchstart ontouchend on iOS.

NOTE: I cannot do this(just register for both events):

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

Whilst this will work on desktop, on iOS, the image src does not change, something to do with the order of events iOS mimics.

So I am trying to transfer the javascript in ontouchstart into onmousedown but I get the error “eles[i] is undefined” when I press the button, the elements EXIST & have the correct ID’s:

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

The problem in your second example is that your added listener results in the following code (or something alike):

function() { "valueOfontouchstartAttribute"; }

Setting the onmousedown attribute like below seems to work for me, but then you might still run into your order of events problem.

eles[i].onmousedown = down;

The first example is a little quirky. If you read out the value of your i-iterator in the for-loop from within the scope of the listener you defined it will have the value of the length of the eles array, this is probably because your listener code is evaluated in a different scope. Scope fix:

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

Also in your first example your code should fail because (like in the first example) the value of the ontouchstart attribute does not get evaluated. Wrapping the attribute value with eval seems to be an option, but I’d say that is pretty dangerous, unless you’re sure you have full control over these attribute values ( When is JavaScript's eval() not evil? )… Just in case:

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

One more question: which browsers do you wish to support when referring to normal desktops? A lot of users still use IE < 9, I read the addEventListener method is then not supported:
addEventListener is not working

In this case you could use first test for the existence of the addEventListener method and else fall back on attachEvent.

Wouldn’t it be easier in general to attach all the listeners on page load in stead of copying them from the HTML?