Can anybody tell me why this onTouch handler isn't firing.

var myDiv = document.getElementById('existingContent');
var myButton = '<a href="#" onClick="logOut();" ontouch="logOut()">log out</a>';
myDiv.appendChild(myButton);

function logOut() {
  alert('hello');
}

I am using iPad 1.

Can anybody tell me why this onTouch handler isn't firing.

var myDiv = document.getElementById('existingContent');
var myButton = '<a href="#" onClick="logOut();" ontouch="logOut()">log out</a>';
myDiv.appendChild(myButton);

function logOut() {
  alert('hello');
}

I am using iPad 1.

• javascript
• touch

• I am using iPad 1. logout() could be anything, the ontouch event won't fire at all. I'm watching firebug to ensure no errors. In my code I'm just calling alert to see if the event is successfully fired at all. – ShadeTreeDeveloper Commented Jun 8, 2012 at 22:25
• The onclick handler works fine in firefox. The only issue I'm having is getting the ontouch to fire in iPad. – ShadeTreeDeveloper Commented Jun 8, 2012 at 22:30
• T.J. - you're right. This isn't my real world code. I've stripped out the fluff to get down to it. My code is namespaces in a self executing anonymous function and there is a lot more text in the string. But, that doesn't explain why my onclick fires in a desktop browser on not on my iPad. – ShadeTreeDeveloper Commented Jun 8, 2012 at 22:35
• 2 Its a miracle that this code actually works. Since when does Node.appendChild take a string? – Cameron Martin Commented Jun 8, 2012 at 22:35
• @Keith: Strongly recommend creating an actual, complete, stripped-down example. The above is basically pseudo-code. Show something that, when pasted into a live environment like jsbin.com, would actually demonstrate the problem. – T.J. Crowder Commented Jun 8, 2012 at 22:36

3 Answers 3

My recommendation would be the same as the one proposed here on MDN:

var el = document.getElementsByTagName("canvas");  
el.addEventListener("touchstart", handleStart, false); 

My hesitation with the ontouch attribute is cross-device support. For this you might consider feature detection.

Modernizr is a popular way to determine if touch is enabled at runtime.

If the events above are enabled, the classes touch or no-touch would be added to the html element and used to determine if the code above should run.

EDIT:

In subsequent days I ran across this document describing Touch Events. As with much of technology, there is still more to it...

There is no "touch" event at all. You can find touchstart, touchend, touchmove and touchcancel events, as is shown in this link. I think you must use touchstart in your HTML:

ontouchstart="logOut()"

Also see this webpage.

Try using onfocus="logOut()" instead of ontouch="logOut()"