為jQuery slideshow增加觸摸滑動功能

文章出自本人部落格：http://www.tarobjtu.com/blog/slide-show-touch-move/

       最近項目中多處用到slideshow（圖檔浏覽）功能，但不同項目客戶希望的實作方式不同，功能不一，如果在現有jQuery plugin插件上修改的話，一來會有未知bug，二來改他人代碼比自己重寫還費事，索性自己寫一個。想添加什麼功能由自己。

        其中一個項目需要支援PC與智能機，這牽涉出兩個問題，一是跟随螢幕尺寸變更問題，二是觸摸屏滑動實作切換圖檔功能。

跟随螢幕尺寸變更問題

       共有3種類型尺寸，PC端螢幕寬度960px，手機豎屏320px，手機橫評480px。頁面布局方面用CSS3的media query實作尺寸調整。JS端實在沒辦法，隻能通過監聽浏覽器視窗尺寸變化實作橫豎屏切換時，slideshow的正常運轉。

觸摸屏滑動實作切換圖檔功能

       如果不熟悉解智能手機（iOS與Android）浏覽器觸摸事件的話，可以先閱讀這兩篇文章：

1、《針對多點觸控浏覽器進行的開發》（翻譯的比較僵硬，有些術語不夠專業，但好文章一枚）

2、《基于JavaScript touch事件的自定義按鈕示例》

以下貼出我的代碼實作：

// $display ： 圖檔的顯示視窗
// .banner img ： 圖檔本身
$display.on('touchstart', '.banner img', function(e){
	var touch = e.originalEvent,
		startX = touch.changedTouches[0].pageX;
						
	$display.on('touchmove', function(e){
		e.preventDefault();
						
		touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
						
		if(touch.pageX - startX > 10){
			$display.off('touchmove');
			reflash(function(){
				var next = index.prev();
				animate(next, 'prev');
			});
		}
		else if (touch.pageX - startX < -10){
			$display.off('touchmove');
			reflash(function(){
				var next = index.next();
				animate(next, 'next');
			});
		}
	});
					
	/* return false; */
					
}).on('touchend',function(){
	$display.off('touchmove');
});      

觸摸事件與滑鼠點選事件

項目中的圖檔包含一個連結，當使用者操縱圖檔時，到底是觸發mouseClick事件還是touchStart,touchMove,touchEnd事件成為一個困惑。iOS與Android事件的運作機制避免了這個問題。

       滑鼠點選事件在觸摸事件touchStart,touchEnd事件觸發之後觸發。兩個方法可以阻止滑鼠事件觸發：

1. 不執行與事件關聯的預設動作。即使用return false; 或者event.preventDefault();但此方法将使圖檔失去打開連結功能。
2. 當touchMove被執行時，滑鼠點選事件mouseClick會被自動取消。