准备主要的点击和触摸事件

debugcn 发表于 Dev

解密后

为了使以下代码正常工作，jsfiddle中提供的工作示例将有所帮助。适用于点击硬件和触摸屏硬件的游戏代码。

如果有一种方法可以避免使用似乎有帮助的init函数。除非您想添加一个如何以某种方式将draw函数调用添加到混合中的示例。

<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

解密后

将其简化为以下方法，也许是一种更好的方法，但目前对我而言有效。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。