隨著移動互聯網的普及，越來越多的網站和應用都在嘗試為用戶提供更加友好的交互體驗。其中，通過手機或平板電腦的觸摸來完成操作已經成為了一種時尚，這種通過觸摸操作的方式被稱為touch事件。所以，很多網站和應用程序都為用戶提供了手勢操作。但是，因為某些原因，有些開發者需要禁止touch事件。這篇文章就是要介紹如何在javascript中禁止touch事件。

其實，禁止touch事件也很簡單，只需要在文檔加載完成的時候，把document元素的touchmove事件禁用就可以了。可以試著在瀏覽器中運行以下代碼看看結果：

document.addEventListener("touchmove", function(e) {
e.preventDefault();
}, false);

此時你會發現，當你用手在屏幕上滑動的時候，頁面沒有任何的反應。雖然這種方式可以成功禁止touch事件，但是我們試著進一步分析一下，因為此時的禁止是全局的，它禁止了所有的touch事件，這并不是我們期望的結果。

所以，在讓javascript禁止touch事件之前，我們應該仔細分析，到底是哪些地方不需要touch事件。例如，在一個網頁導航條上，我們只需要拖拽就可以實現自動橫向切換，然而它并不需要滑動到頁面邊緣時切換。因此，我們需要分析每個元素的touch事件，把不必要的事件禁止掉，以便在保證被禁止了的touch事件不影響使用的情況下，能夠盡可能的保留touch事件的使用。下面是一些可能需要禁止touch事件的情況：

• 禁止拖拽，但是保留滾動條的滾動事件。
• 禁止手勢縮放，但是保留拖拽操作。
• 禁止雙擊事件的觸發，但是保留單擊事件。
• 禁止touch事件的冒泡，但是保留touchmove事件的冒泡。

對于上述情況，我們都可以采用JavaScript禁用touch事件的方法。這里提供幾個示例：

//禁止元素的所有touch事件
document.getElementById("drag").addEventListener("touchmove", function(e){
e.preventDefault();
}, false);
//禁止雙指縮放
document.getElementById("zoom").addEventListener("gesturechange", function(e){
e.preventDefault();
}, false);
//禁止雙擊事件
document.getElementById("doubletap").addEventListener("touchstart", function(event){
var now = new Date().getTime();
var lastTouch = this.dataset.lastTouch || now + 1; // first time this will be undefined, setting to 1ms in the future so the first attempt to compare will fail
var delta = now - lastTouch;
if(delta< 500 && delta >0){
event.preventDefault();
this.dataset.lastTouch = null;
} else {
this.dataset.lastTouch = now;
}
}, false);
//阻止touchmove事件冒泡
document.getElementById("parent").addEventListener("touchmove", function(e){
e.stopPropagation();
}, false);

最后提醒一點：有些瀏覽器可能不支持觸摸事件，所以，如果你需要使用touch事件，請保證你的瀏覽器能夠支持觸摸事件。