站長資訊網(wǎng)
javascript實現(xiàn)禁止縮放的方法：1、設置對應瀏覽器的啟動參數(shù)來禁止用戶縮放頁面；2、設置meta來禁止用戶縮放頁面；3、通過js監(jiān)聽來禁止用戶縮放頁面；4、禁用“ontouchmove”事件；5、通過多點觸摸手勢庫實現(xiàn)。
本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
javascript怎么實現(xiàn)禁止縮放？
javascript瀏覽器禁止用戶放大縮小的五種方法
方案一：設置對應瀏覽器的啟動參數(shù)來禁止用戶縮放頁面
這種方案在自建平臺上，自選的指定瀏覽器上效果是可以的，但是不推薦，比如chrome主要通過設置* { touch-acion : none }來實現(xiàn)禁用縮放的方法，具體方案可自行搜索,我也沒有進行相關測試。
touch-acion的參數(shù)意義如下：
auto：默認值。瀏覽器允許一些手勢（touch）操作在設置了此屬性的元素上，例如：對視口（viewport）平移、縮放等操作。
none：禁止觸發(fā)默認的手勢操作。
pan-x：可以在父級元素(the nearest ancestor)內進行水平移動的手勢操作。
pan-y：可以在父級元素內進行垂直移動的手勢操作。
manipulation：允許手勢水平/垂直平移或持續(xù)的縮放。任何auto屬性支持的額外操作都不支持。
注：touch-action只支持具有CSS width和height屬性的元素。這個限制的目的是幫助瀏覽器優(yōu)化低延時的手勢操作。對于默認不支持此屬性的元素，如這種內聯(lián)元素，可以給它設置display:block這樣的CSS屬性來支持width和height。未來W3C規(guī)范會將此API擴展到支持所有元素。
方案二：設置meta來禁止用戶縮放頁面
這是搜索后經(jīng)常出現(xiàn)的方案，但是現(xiàn)在，這個標簽在新的瀏覽器（比如在ios10+）中已經(jīng)失效，換言之，對于老版本的瀏覽器可能有效。
在Android的自帶瀏覽器中(例如華為，魅族，小米)第一次手動縮放時，會提示–再次操作可強制縮放網(wǎng)頁—；再次縮放也可以縮放；
這一現(xiàn)象意味著meta標簽的失效。在Android的chrome中不可以用戶縮放（表現(xiàn)正常）
直接上代碼（在.html文件中的<head></head>之間添加如下語句）：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
方案三：通過js監(jiān)聽來禁止用戶縮放頁面
直接上代碼：
window.onload=function(){ document.addEventListener('touchstart',function (event) { if(event.touches.length>=2){ event.preventDefault(); } }) document.addEventListener('touchmove',function (event) { if(event.touches.length>=2){ event.preventDefault(); } }) document.addEventListener('touchend',function (event) { if(event.touches.length>=2){ event.preventDefault(); } }) }
其中的event.touches.length是獲取當天有幾個點擊事件同時發(fā)生，簡單而言，就是有幾個手指同時點擊了屏幕，以為一般縮放操作都是兩個手指以上進行的，所以這里應該滿足的條件為event.touches.length>=2。不足之處就是禁用了所有的多點觸控的操作。
【推薦：javascript高級教程】
方案四：禁用“ontouchmove”事件
因為縮放屏幕必然跟隨著雙指的ontouchmove事件，我們在<html></html>標簽內加入禁用該事件的函數(shù)event.preventDefault()即可，這招非常暴力，意味著全局無法使用使用滑動、拖動等動作，只接受點擊動作。
代碼如下——
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ontouchmove="event.preventDefault();"> <head> /****some code***/ </head> <body> /****some code***/ </body> </html>
其中的event.preventDefault()函數(shù)將通知 Web 瀏覽器不要執(zhí)行與事件關聯(lián)的默認動作（如果存在這樣的動作）。例如，如果 type 屬性是 “submit”，在事件傳播的任意階段可以調用任意的事件句柄，通過調用該方法，可以阻止提交表單。注意，如果 Event 對象的 cancelable 屬性是 fasle，那么就沒有默認動作，或者不能阻止默認動作。無論哪種情況，調用該方法都沒有作用。
寫到這里，忽然想到，是否只禁用某個<div></div>區(qū)塊的ontouchmove事件，比如：
<div ontouchmove="event.preventDefault();"></div>
但這種區(qū)塊禁用的方式我還沒有測試，你可以說我比較懶了，自己去測試吧～～～～
然而還沒有得瑟一個月，我就有了這個需求，補充如下，直接上實現(xiàn)代碼：
var singleTouchFlag; //多指觸控標識符 $("#songList").on("touchstart", function (e) { //引用了jquery庫，我所要多指禁止的區(qū)域id為“songList” // 判斷默認行為是否可以被禁用 console.log("touchstart Entered!!!"); if (e.cancelable) { // 判斷默認行為是否已經(jīng)被禁用 if (!e.defaultPrevented) { e.preventDefault(); } } if (1 == parseInt(e.originalEvent.touches.length)) { singleTouchFlag = true; // do something } else { singleTouchFlag = false; } }); $("#songList").on("touchmove", function (e) { // 判斷默認行為是否可以被禁用 if (e.cancelable) { // 判斷默認行為是否已經(jīng)被禁用 if (!e.defaultPrevented) { e.preventDefault(); } } if (singleTouchFlag) { //do something } }); $("#songList").on("touchend", function (e) { // 判斷默認行為是否可以被禁用 console.log("touchend Entered!!!"); if (e.cancelable) { // 判斷默認行為是否已經(jīng)被禁用 if (!e.defaultPrevented) { e.preventDefault(); } } if (singleTouchFlag) { //do something } });
方案五：借助于**多點觸摸手勢庫“hammer.js ”**解決
hammer.js 是一個多點觸摸手勢庫，能夠為網(wǎng)頁加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多點觸摸事件，免去自己監(jiān)聽底層touchstart、touchmove、touchend事件并且寫一大堆判斷邏輯的痛苦。
hammer.js 不但支持觸摸屏設備的瀏覽器，在桌面瀏覽器上，也能將鼠標的點擊當做觸摸，方便開發(fā)人員在桌面瀏覽器上調試。（JS仔在自己的隨手背項目里面也用了hammer.js，真心好用）
直接上代碼（在.html文件中的<head></head>之間添加如下語句）：
<script src = "http://eightmedia.github.com/hammer.js/hammer.js" > </script> <script> window.onload = function () { var hammerMusicBlock = new Hammer(document.getElementById("musicBlock")); hammerMusicBlock.ontransformstart = function (ev) { ev.preventDefault(); }; // double fingers touchstart hammerMusicBlock.ontransform = function (ev) { ev.preventDefault(); }; // double fingers touchmove hammerMusicBlock.ontransformend = function (ev) { ev.preventDefault(); }; // double fingers touchend } </script>
hammer.js 其他的使用方式簡介，直接看代碼：
<script src = "http://eightmedia.github.com/hammer.js/hammer.js" > </script> // 先要對監(jiān)聽的DOM進行一些初始化 var hammer = new Hammer ( document . getElementById ( "container" ) ) ; // 然后加入相應的回調函數(shù)即可 hammer . ondragstart = function ( ev ) { } ; // 開始拖動 hammer . ondrag = function ( ev ) { } ; // 拖動中 hammer . ondragend = function ( ev ) { } ; // 拖動結束 hammer . onswipe = function ( ev ) { } ; // 滑動 hammer . ontap = function ( ev ) { } ; // 單擊 hammer . ondoubletap = function ( ev ) { } ; //雙擊 hammer . onhold = function ( ev ) { } ; // 長按 hammer . ontransformstart = function ( ev ) { } ; // 雙指收張開始 hammer . ontransform = function ( ev ) { } ; // 雙指收張中 hammer . ontransformend = function ( ev ) { } ; // 雙指收張結束 hammer . onrelease = function ( ev ) { } ; // 手指離開屏幕 hammer.js 還支持jQuery插件的形式調用： <script src = "http://eightmedia.github.com/hammer.js/jquery.hammer.js" > </script> $ ( "#element" ) . hammer ( { // 對DOM進行一些初始化，這里可以加入一些參數(shù) } ) . bind ( "tap" , function ( ev ) { console . log ( ev ) ; } ) ;
暫時總結這五種方案，如果有其他更好的方案，請?zhí)砑拥皆u論區(qū)，謝謝。
