HTML5 CANVAS IE 10, 11 에서 터치이벤트

HTML5 CANVAS IE 10, 11 에서 터치이벤트

익스플로러 10, 11, 엣지브라우저에서 터치이벤트(mousedown, mousemove 등)가 안 먹힌다.

이런 경우엔 아래 처럼 처리를 해주면 된다. (핀치투줌은 none -> pinch-zoom)

if(window.PointerEvent) { // for IE11

$('#drawCanvas').css({'touch-action':'none'});

} else if(window.MSPointerEvent) { // for IE10

$('#drawCanvas').css({'-ms-touch-action':'none'});

} else {}

css 로 바로 처리를 하여도 된다.

<style type="text/css">

canvas { touch-action: none; -ms-touch-action: none; }

</style>