How to combine eventhandlers for mouse and touchscreen (iPad)

Hello everyone.

I’m using a small script to scroll some text. The triggers are in two arrow-images.

The original script uses onMouseOver and onMouseOut. Hence touchscreens ignore these (don’t function right) I added onTouchStart and onTouchEnd, but simply adding these eventhandler won’t do the trick.

I found a clue but I don’t know how to properly integrate it in one piece of proper code.

original:

[CODE] <img src=”../images/btn_arrowup_orange.png” class=”scrollbar-up” id=”arrowup” onmouseover=”scroller.startScroll(0, 5);” onmouseout=”scroller.stopScroll();” />
<img src=”../images/btn_arrowdown_orange.png” class=”scrollbar-down” id=”arrowdown” onmouseover=”scroller.startScroll(0, -5);” onmouseout=”scroller.stopScroll();” />[/CODE]

changed it into:

[CODE] <img src=”../images/btn_arrowup_orange.png” class=”scrollbar-up” id=”arrowup” onTouchStart=”scroller.startScroll(0, 5);” onMouseOver=”scroller.startScroll(0, 5);” onMouseOut=”scroller.stopScroll();” onTouchEnd=”scroller.stopScroll();” />
<img src=”../images/btn_arrowdown_orange.png” class=”scrollbar-down” id=”arrowdown” onTouchStart=”scroller.startScroll(0, -5);” onMouseOver=”scroller.startScroll(0, -5);” onMouseOut=”scroller.stopScroll();” onTouchEnd=”scroller.stopScroll();” />[/CODE]

see link:
[URL=”http://bertienvanmanen.nl/pages/cv.html#”]http://bertienvanmanen.nl/pages/cv.html#[/URL]

and the clue might be:

[CODE] element.onmousedown = function (e) {
document.onmouse = etc.
document.onmouseup = etc.
}

element.ontouchstart = funtion (e) {
element.onmousedown = null;
document.ontouchmove = etc.
document.ontouchend = etc.
}[/CODE]

Also in #JavaScript _↴