摘要：前幾天看到一個(gè)微信刮刮獎的東西，感覺蠻有意思的，照著網(wǎng)上搜的教程自己做了下，發(fā)現(xiàn)幾個(gè)坑，這里做下記錄，希望大家多多指教。找到原因了，接口捕獲的事件和捕獲的事件是不同的沒想到連事件都封裝了

本人前端新手，剛?cè)肓艘粋€(gè)小公司，公司web游戲的需求比較大，所以最近在搜各種微信營銷活動的案例，以備不時(shí)之需。前幾天看到一個(gè)微信刮刮獎的東西，感覺蠻有意思的，照著網(wǎng)上搜的教程自己做了下，發(fā)現(xiàn)幾個(gè)坑，這里做下記錄，希望大家多多指教。
游戲主要是一個(gè)canvas控件，先填充驗(yàn)色或圖片，然后設(shè)置上下文（getContext("2d")）的globalCompositeOperation屬性為"destination-out",然后綁定mousemove/touchmove事件來畫圓就行了。問題出在綁定touchmove上：

    guagua.stage
        .on(mobile?"touchstart":"mousedown",function () {
            guagua.stage.drawn=true;
            console.log("start")
        })
        .on(mobile?"touchmove":"mousemove",
            mobile?function (e) {
                e.preventDefault();
                if(guagua.stage.drawn){
                    pointX=e.originalEvent.touches[0].clientX-guagua.stageX;
                    pointY=e.originalEvent.touches[0].clientY-guagua.stageY;
                    guagua.drawPoint(pointX,pointY);
                }
            }:function (e) {
                e.preventDefault();
                if(guagua.stage.drawn){
                    pointX=e.clientX-guagua.stageX;
                    pointY=e.clientY-guagua.stageY;
                    guagua.drawPoint(pointX,pointY);
                }
            }
        )
        .on(mobile?"touchend":"mouseup",function () {
            console.log("end");
            guagua.stage.drawn=false;
            if(guagua.howMuchLeft()>50){
                guagua.stage.hide();
            }
        });

網(wǎng)上的例子是14年的，里面移動端事件的x坐標(biāo)是e.touches[0].clientX我試了一下，結(jié)果報(bào)錯(cuò)：touches未定義，打斷點(diǎn)下發(fā)現(xiàn)touches事件列表是包含在originalEvent屬性里的，然后加上去以后確實(shí)可以了，但是mozila的文檔也是有touches的https://developer.mozilla.org...，我用的是chrome版本號是51.0.2704.84 m，不知道是不是瀏覽器的問題。

16.7.11

找到原因了，dom接口捕獲的事件和jquery捕獲的事件是不同的

沒想到j(luò)query連事件都封裝了