移動端touchstar、touchmove、touchend 事件如果頁面有滾動時不讓觸發 touchend 事件。

/*僅適用於內容中點擊元素。對於拖動等元素，需要自行在頁面處理。
* 主要是綁定touchstart和touchmove事件，並判斷用戶按下之后手指移動了多少像素。
* 如果手指移動距離小於10像素，則還是認為用戶在做點擊操作。如果移動距離超過了10像素，則取消后續事件監聽函數的執行。*/

<script type="text/javascript">
function makeTouchableButton(ele) {
        if (!ele) {
            console.error("MIGlobals.makeTouchableButton 無效的元素！");
            return false;
        }
        
        

        ele.addEventListener("touchstart", function(evt){
            this.setAttribute("data-moved", "n");
            var p = evt.touches[0];
            this.setAttribute("data-touch-start-clientx", p.clientX);
            this.setAttribute("data-touch-start-clienty", p.clientY);
            
        });

        ele.addEventListener("touchmove", function(evt){
            if (this.getAttribute("data-moved") == "y") return false;

            var p = evt.touches[0];
            var startClientX = parseInt(this.getAttribute("data-touch-start-clientx"), 10);
            var startClientY = parseInt(this.getAttribute("data-touch-start-clienty"), 10);
            var deltax = p.clientX - startClientX;
            var deltay = p.clientY - startClientY;
            if (Math.abs(deltax) > 10 || Math.abs(deltay) > 10) {
                this.setAttribute("data-moved", "y");
            }
        });

        ele.addEventListener("touchend", function(evt) {
            
            if (this.getAttribute("data-moved") == "y") {
                evt.stopImmediatePropagation();
                return false;
            }
        });

    }

    var divs = document.querySelector(".touchdiv");
    makeTouchableButton(divs);
    divs.addEventListener("touchend",function(){
        console.log("您點擊我啦。");
    });
    </script>