터치 및 마우스 이벤트 간의 이중 트리거를 방지하는 방법

데스크톱 용 마우스 이벤트를 허용하는 jquery html5 캔버스 스케치 응용 프로그램을 만들었습니다 (펜 태블릿은 마우스 이벤트 만 사용함). 또한 모바일 웹 지원 앱으로 iphone, ipad, andriod 기기에서 손가락으로 그림을 그릴 수 있습니다. 휴대 기기가 자체적으로 마우스 클릭 이벤트를 트리거하기 때문에 : 즉, 브라우저의 유형을 감지하고 모든 마우스 바인딩을 터치 바인딩으로 바꿔야 이벤트가 두 번 터지는 것을 방지 할 수 있습니까?터치 및 마우스 이벤트 간의 이중 트리거를 방지하는 방법

<!DOCTYPE html> 
    <html> 
    <head> 
     <script src="jquery.min.js"></script> 
    </head> 
    <body> 
    <canvas id="myCanvas" width="1600px" height="1600px" style="border:1px dashed gray;background-color:white;"> 
    </canvas> 

    <script> 

    function brushStart() { 
     $('#myCanvas').css('background-color','blue'); 
    } 
    function brushEnd() { 
     $('#myCanvas').css('background-color','red'); 
    } 
    function brushMove() { 
     $('#myCanvas').css('background-color','yellow'); 
    } 

    $('#myCanvas').bind('mousedown', brushStart); 
    $('#myCanvas').bind('mouseup', brushEnd); 
    $('#myCanvas').bind('mousemove', brushMove); 
    $('#myCanvas')[0].addEventListener('touchstart',brushStart,false); 
    $('#myCanvas')[0].addEventListener('touchend',brushEnd,false); 
    $('#myCanvas')[0].addEventListener('touchmove',brushMove,false); 

    </script> 

    </body> 
    </html>

출처

2012-03-21 Homan

난 당신이 찾고있는 무엇을 할 다음을 사용했습니다 : : 여기

바보 같은 예입니다

$("#myCanvas").bind("touchstart mousedown", function (event) { 
    var e = event.originalEvent; 
    e.preventDefault(); 

    startX = (e.targetTouches != undefined) ? e.targetTouches[0].screenX : e.offsetX; 
    startY = (e.targetTouches != undefined) ? e.targetTouches[0].screenY : e.offsetY; 

});

포인트의 몇 - 당신이 접근 할 필요가 targetTouches를 사용하려면 jQuery의 originalEvent를 사용하십시오. 또한 분명히 확실하기 때문에 offsetX/Y에 필요한 속성 쌍을 마우스 이벤트로 대체 할 수 있습니다.

출처

2012-03-22 20:37:48 user631644

터치 및 마우스 이벤트 간의 이중 트리거를 방지하는 방법

답변

관련 문제