이럴 경우 아래 자바스크립트를 삽입한 후 버튼에서 onTouchStart에서 함수를 호출하면 딜레이가 생기지 않는다.
<script type="text/javascript" charset="utf-8">
function NoClickDelay(el) {
this.element = typeof el == 'object' ? el : document.getElementById(el);
if( window.Touch ) this.element.addEventListener('touchstart', this, false);
}
NoClickDelay.prototype = {
handleEvent: function(e) {
switch(e.type) {
case 'touchstart': this.onTouchStart(e); break;
case 'touchmove': this.onTouchMove(e); break;
case 'touchend': this.onTouchEnd(e); break;
}
},
onTouchStart: function(e) {
e.preventDefault();
this.moved = false;
this.theTarget = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
if(this.theTarget.nodeType == 3) this.theTarget = theTarget.parentNode;
this.theTarget.className+= ' pressed';
this.element.addEventListener('touchmove', this, false);
this.element.addEventListener('touchend', this, false);
},
onTouchMove: function(e) {
this.moved = true;
this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');
},
onTouchEnd: function(e) {
this.element.removeEventListener('touchmove', this, false);
this.element.removeEventListener('touchend', this, false);
if( !this.moved && this.theTarget ) {
this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');
var theEvent = document.createEvent('MouseEvents');
theEvent.initEvent('click', true, true);
this.theTarget.dispatchEvent(theEvent);
}
this.theTarget = undefined;
}
};
// test function
function testButtonClick()
{
alert( "Test" );
}
</script>
위의 내용을 자바스크립트에 삽입한 후
아래와 같이 onTouchStart에서 함수를 호출하면 된다.
<input type="button" value="test" onTouchStart="testButtonClick()"/>
