How to combine eventhandlers for mouse and touchscreen (e.g. iPad)

[Jongen]

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, the text keeps on scrolling) I added onTouchStart and onTouchEnd, but simply adding these eventhandlers won't do the trick.

I found a clue but I don't know how to properly integrate it in one piece of well written code.

original:

<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();" />

changed it into:

 <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();" />

see link:
http://bertienvanmanen.nl/pages/cv.html#

and the clue might be:

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

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

[djr33]

It's complicated and I don't have any specific advice. I think you can generally accomplish what you're trying to do (assuming the devices cooperate-- not all of them will, I'm guessing), but, for example, the math might be a little different.

The main reason I wanted to reply was to link you to another recent discussion where I posted a link that might be helpful for you:http://www.dynamicdrive.com/forums/s...131#post264131

[jscheuer1]

I would want to know what the problem(s) really is/are.

Is the mobile device ignoring the onTouchStart/onTouchEnd attribute events because there are also onMouseOver/onMouseOut attribute events on the same elements? Like try it without the onMouseOver/onMouseOut attribute events. Does it now work in the mobile device? Clear the mobile device's cache and refresh the page between versions, or use a separate page for each experiment.

As you may know you cannot use camelHumpNotation for javascript events. Some browsers don't like it even for inline attribute events, perhaps that's the problem.

Is there a problem running the code of the event in the mobile device? You can test that by doing:

<img src="../images/btn_arrowup_orange.png" class="scrollbar-up" onTouchStart="alert('here');" />
<img src="../images/btn_arrowup_orange.png" class="scrollbar-up" onTouchStart="scroller.startScroll(0, 5);" />

If the first one alerts 'here', but the second one doesn't scroll, the startScroll function is a problem.

If the first one does nothing, the inline attribute event isn't working at all.

There are various tests that could be done all along the way to various possible solutions. And we can get into that if need be. But to implement what I think the possible solution offered at the end of your post is hinting at, we could try:

 <img src="../images/btn_arrowup_orange.png" class="scrollbar-up" id="arrowup" />
<img src="../images/btn_arrowdown_orange.png" class="scrollbar-down" id="arrowdown" />
<script type="text/javascript">
(function(){
	var up = document.getElementById('arrowup'), dwn = document.getElementById('arrowdown');
	up.onmouseover = function(){
		scroller.startScroll(0, 5);
	};
	dwn.onmouseover = function(){
		scroller.startScroll(0, -5);
	};
	up.onmouseout = dwn.onmouseout = function(){
		scroller.stopScroll();
	};
	up.ontouchstart = function(){
		up.onmouseover = up.onmouseout = null;
		scroller.startScroll(0, 5);
	};
	dwn.ontouchstart = function(){
		dwn.onmouseover = dwn.onmouseout = null;
		scroller.startScroll(0, -5);
	};
	up.ontouchend = dwn.ontouchend = function(){
		scroller.stopScroll();
	};
})();
</script>

The script must come after the elements as shown. But that will only work if the scroller functions work in the mobile device, and the solution from your post really solves the problem. If it works though, I guess we could leave it at that. But it could be done a bit more elegantly.