IT工程師數位筆記本

　　隨著移動端的興起，手機頁面的需求也越來越多。

　　而因為app的開發費用較高，臨時活動項目基本上都是使用wap頁面。

　　最近因為需求的日益提高，接觸手機觸屏事件也越來越多（遇到的問題也越來越多T_T）。

　　好，下面說說今天遇到的問題及解決辦法：

　　需求是一個類似pc端的滾屏效果頁面，而平時十分好用的scroll事件在手機端頁面的交互不太友好，所以使用了百度來的touchmove事件。

　　使用方法是先用event.preventDefault()禁止瀏覽器事件（就是這個方法讓我吃盡苦頭），然后手動添加監聽觸屏的touch事件。

　　由于技術有限，最終我還是放棄自己寫，而選擇了一個應用該原理的插件，touchslider(觸屏輪播功能強大，而且簡單易用);

　　該插件在觸屏輪播上十分強大，原本我是用來做手機輪播圖的，但是將其中的一個參數direction設置為up或down后即可模擬成一個滾屏效果^_^;

　　一開始十分順利，然后遇到問題：

　　需求要求頁面上有個文本輸入框，點擊后會觸發彈出手機自身的軟鍵盤，軟鍵盤彈出后將整個頁面在瀏覽器層面往上移動了大約100px，取消焦點，軟鍵盤關閉后，整個頁面就維持在向上100px的樣式，不返回彈出前的樣式了。

　　經測試，應該就是之前禁止瀏覽器事件的event.preventDefault()所導致，但是整個頁面的核心也即在event.preventDefault()，用判斷關閉開啟也十分容易出錯，糾結！

　　百度，瞎蒙了一整天，最后用以下方法實現基本不影響使用：

var t2 = new TouchSlider({
        id: 'slider',
        speed: 800,
	direction: "up",
	auto:false,
	align: "left",
        before: function (index) {
            as[active].className = '';
            active = index;
            as[active].className = 'active';
			$('p').fadeOut();
			//t2.removeListener();
        },
	after: function (index){
	        switch(index){
		  case 0:
			$('.p1').fadeIn(500);
			break;
		  case 1:
			$('.p1').fadeIn(500);
			$(window).scrollTop(-600);//無視上面，起作用的是這一行	
		　　　　　break;
　　　　　　　　　　}
	}
    });

　　原理是將焦點返回瀏覽器，當用戶再次觸屏動作時，就會先將瀏覽器上移的部分還原；

　　scrollTop（-600）是為了將頁面停留在第二屏，保持我的頁面效果

　　其實應該只要隨意觸發一個瀏覽器層面的事件，如scroll之類的，將焦點回到瀏覽器即可。

　　這只是曲線救國，以后找到正面擊敗此bug的方法，再行記錄，以上。

　　2014.12.4更新：

　　找到解決方法：將瀏覽器滑至頂部的方法：document.body.scrollTop=0; 在輸入框失去焦點的時候$().blur里面加上即可

　　需要注意的是，在安卓瀏覽器關閉軟鍵盤后不會讓輸入框失去焦點，所以document.body.scrollTop=0;需在滾動或者其他方法里也加入

　　模版世界:http://www.templatesy.com