解决 Touch 事件与 Scroll 事件的冲突问题

开发移动应用时会遇到一个 UI 里面既可以点击(touchend)又可以滑动(scroll window)的情况，如果同时绑定两个事件就会同时执行，这是我们所不愿意看到的情况。大致解决思路是通过一个变量标记当前的触摸状态，当手指移动时标记为正在拖拽，而没有移动的时候则标记为没有在拖拽。代码如下：

// jQuery 代码 
var isDragging = false, element = $('#element');
element.on('touchstart', '.target', function(event) {
    isDragging = false;
});
element.on('touchmove', '.target', function(event) {
    isDragging = true;
});
element.on('touchend', '.target', function(event) {
    if(isDragging) return false;
    var self = $(this);
    // 点击时的业务代码
    console.log(self);
});

// 原生 JS 代码(ES5) 
var isDragging = false, 
element = document.querySelector('#element');
element.addEventListener('touchstart', function(event) {
    isDragging = false;
}, false);
element.addEventListener('touchmove', function(event) {
    isDragging = true;
}, false);
element.addEventListener('touchend', function(event) {
    if(isDragging) return false;
    var self = event.target,
    t = 'target';
    while(self && self.classList && !self.classList.contains(t)){
        self = self.parentNode;
    }
    // 点击时的业务代码
    console.log(self);
}, false);