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