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