觸摸事件句柄與mousedown，mousemove和mouseup在標準的JavaScript不jQuery

Question

任何機構，請告訴我如何創建一個觸摸事件處理與JavaScript中的3個事件可用mousedown，mousemove和mouseup？

任何想法是讚賞！

Answer 1

我有我自己的問題的想法，我用這個來移動我的幻燈片這樣的：

function Dragging() { 
    var isDragging = false; 
    var isStartDragging = false; 
    var isEndDragging = true; 
    var startPoint = 0; 
    $('.Content-Page-List').mousedown(function (e) { 
     e = e || event; 
     if (!isStartDragging && !isDragging && isEndDragging) { isStartDragging = true; isEndDragging = false; startPoint = e.pageX; } 
     else { isStartDragging = isDragging = false; } 
    }); 
    $('.Content-Page-List').mousemove(function() { 
     if (isStartDragging && !isEndDragging) { isDragging = true;} 
     else { return; } 
    }); 
    $('.Content-Page-List').mouseup(function (e) { 
     e = e || event; 
     var leftVal = $(this).position().left; 
     if (isDragging && !isSlideMoving) { 
      var oldSlide = slide; 
      /* Slide move from left to right */ 
      if (startPoint < e.pageX) { 
       if (leftVal == 0) return; 
       isSlideMoving = true; 
       $('.Content-Page-List').animate({ left: (leftVal + 1200) + 'px' }, 'slow', function() { 
        slide = parseInt(slide - 1); 
        contentHeight = $('.Content-Page-List').children('ul').children('li').eq(slide).height(); 
        $('#page' + slide).parent().parent().css('background', 'rgba(243, 0, 0, 0.6)'); 
        $('#Content-Page-List-Wrapper').css('height', contentHeight + 'px'); 
        isStartDragging = isDragging = false; 
        isEndDragging = true; 
        isSlideMoving = false; 
       }); 
      } 
      /*Slide move from right to left */ 
      else { 
       if (leftVal == -((numOfLi * 1200) - 1200) || numOfLi == 1) return; 
       isSlideMoving = true; 
       $('.Content-Page-List').animate({ left: (leftVal - 1200) + 'px' }, 'slow', function() { 
        slide = parseInt(slide + 1); 
        contentHeight = $('.Content-Page-List').children('ul').children('li').eq(slide).height(); 
        $('#page' + slide).parent().parent().css('background', 'rgba(243, 0, 0, 0.6)'); 
        $('#Content-Page-List-Wrapper').css('height', contentHeight + 'px'); 
        isStartDragging = isDragging = false; 
        isEndDragging = true; 
        isSlideMoving = false; 
       }); 
      } 
      $('#page' + oldSlide).parent().parent().css('background', '#f4f4f4'); 
     } 
     else { isStartDragging = false; isEndDragging = true; } 

    });