Decrypted Decrypted - 1 month ago 9
Javascript Question

Preparing for main Click and Touch Events

Trying to get the following code to work, a working example presented in jsfiddle will help. The codes for a game that should work on both click hardware and touchscreen hardware.

If there's a way to avoid using an init function that seems to help. Unless you feel like adding an example of how to get a draw function call into the mix somehow.

<p id="Xpos"></p>
<p id="Ypos"></p>

<script>

//############################### Mouse and Touch Events : Start

<!-- Source Code Web Site:
http://blog.patricktresp.de/2012/02/
internet-explorer-8-
and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/ -->
var el;
el = document.getElementById('bgLayerMain');

if( el.addEventListener )
{
el.addEventListener('mousedown', onMouseDown, false);
}else if( el.attachEvent ) {
el.attachEvent('onmousedown', onMouseDown);
}
if( is_touch_device() ) {addListeners(); alert("here");}


function stopEvent(e) {

if(!e) var e = window.event;

//e.cancelBubble is supported by IE -
// this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = false;

//e.stopPropagation works only in Firefox.
if ( e.stopPropagation ) e.stopPropagation();
if ( e.preventDefault ) e.preventDefault();

return false;
}


function addListeners( el )
{// Allow function call without passing parameters
var e = el;
if( !e ) e = document.getElementById('bgLayerMain');
var el = e;

if( el )
{
if( el.addEventListener )
{
el.addEventListener('mouseup', onMouseUp, true);
el.addEventListener('mousemove', onMouseMove, true);
el.addEventListener('touchstart', onTouchStart, true);
el.addEventListener('touchmove', onTouchMove, true);
el.addEventListener('touchend', onTouchEnd, true);
}else if( el.attachEvent ) {
// make sure mouse events have the prefix <strong>on</strong>
el.attachEvent('onmouseup', onMouseUp);
el.attachEvent('onmousemove', onMouseMove);
el.attachEvent('touchstart', onTouchStart);
el.attachEvent('touchmove', onTouchMove);
el.attachEvent('touchend', onTouchEnd);
}
}
}


// also remove the Listeners correctly:
function removeListeners( el ) {
var e = el;
if( !e ) e = document.getElementById('bgLayerMain');
var el = e;
if( el )
{

if( el.removeEventListener )
{
el.removeEventListener('mouseup', onMouseUp);
el.removeEventListener('mousemove', onMouseMove);
el.removeEventListener('touchstart', onTouchStart);
el.removeEventListener('touchmove', onTouchMove);
el.removeEventListener('touchend', onTouchEnd);
}else if( el.detachEvent ) {
el.detachEvent('onmouseup', onMouseUp);
el.detachEvent('onmousemove', onMouseMove);
el.detachEvent('touchstart', onTouchStart);
el.detachEvent('touchmove', onTouchMove);
el.detachEvent('touchend', onTouchEnd);
}
}
}


function onMouseDown(e) {
log('-&gt; mouse down');
addListeners();
e.touches = [{clientX: e.clientX, clientY: e.clientY}];
onTouchStart(e);
stopEvent(e);
}
function onTouchStart(e) {
log('-&gt; touch start');

//do something with e.touches[0].clientX or e.touches[0].clientY
updateMousePos(e.touches[0].clientX,e.touches[0].clientY);

stopEvent(e);
}


function onMouseMove(e) {
log('-&gt; mouse move');
e.touches = [{clientX: e.clientX, clientY: e.clientY}];
onTouchMove(e);
stopEvent(e);
}
function onTouchMove(e) {
log('-&gt; touch move');
//do something with e.touches[0].clientX or e.touches[0].clientY
updateMousePos(e.touches[0].clientX,e.touches[0].clientY);

stopEvent(e);
}


function onMouseUp(e) {
log('-&gt; mouse up');
e.touches = [{clientX: e.clientX, clientY: e.clientY}];
removeListeners();
stopEvent(e);
}
function onTouchEnd(e) {
log('-&gt; touch end');
if( !is_touch_device() ) removeListeners();
}


function log(str) {
var c;
c = document.getElementById('console');
c.innerHTML = str + '
' + c.innerHTML;
}

function is_touch_device() {
return !!('ontouchstart' in window) ? 1 : 0;
}

function updateMousePos(){
//update posX and posY
}

//############################### Mouse and Touch Events : End

Answer

Simplified it to the following, perhaps a better way, yet for now works for me.

var clickOrTouchActive = 0;

addEventListener("mousedown", onClickOrTouchStart, false);
addEventListener("touchstart", onClickOrTouchStart, false);
addEventListener("mousemove", onClickOrTouchMove, false);
addEventListener("touchmove", onClickOrTouchMove, false);
addEventListener("mouseup", onClickOrTouchEnd, false);
addEventListener("touchend", onClickOrTouchEnd, false);


function onClickOrTouchStart(e) {
    updateMousePos(e.pageX,e.pageY);
    tileMouseClicked(e.pageX,e.pageY);
    fAngleOfMotion(e.pageX,e.pageY);

    clickOrTouchActive = 1;
    e.preventDefault();
    return false;
}// end function onClickOrTouchStart


function onClickOrTouchMove(e) {
    if (clickOrTouchActive == 1){
        updateMousePos(e.pageX,e.pageY);
        tileMouseClicked(e.pageX,e.pageY);
        fAngleOfMotion(e.pageX,e.pageY);
    }
    e.preventDefault();
    return false;
}//end function onClickOrTouchMove


function onClickOrTouchEnd(e) {
    updateMousePos(e.pageX,e.pageY);
    tileMouseClicked(e.pageX,e.pageY);
    fAngleOfMotion(e.pageX,e.pageY);

    clickOrTouchActive = 0;
    e.preventDefault();
    return false;
}// end function onClickOrTouchEnd