javascript如何实现禁止缩放

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(); 
      } 
  }) 
}

   
    /****some code***/
  
  
    /****some code***/
  

但这种区块禁用的方式我还没有测试，你可以说我比较懒了，自己去测试吧～～～～

然而还没有得瑟一个月，我就有了这个需求，补充如下，直接上实现代码：

var singleTouchFlag; //多指触控标识符
$("#songList").on("touchstart", function (e) {  //引用了jquery库，我所要多指禁止的区域id为“songList”
    // 判断默认行为是否可以被禁用
    console.log("touchstart Entered!!!");
    if (e.cancelable) {
        // 判断默认行为是否已经被禁用
        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) {
        // 判断默认行为是否已经被禁用
        if (!e.defaultPrevented) {
            e.preventDefault();
        }
    }
    if (singleTouchFlag) {
        //do something
    }
});
$("#songList").on("touchend", function (e) {
    // 判断默认行为是否可以被禁用
    console.log("touchend Entered!!!");
    if (e.cancelable) {
        // 判断默认行为是否已经被禁用
        if (!e.defaultPrevented) {
            e.preventDefault();
        }
    }
    if (singleTouchFlag) {
        //do something
        
    }
});

方案五：借助于**多点触摸手势库“hammer.js ”**解决

hammer.js 是一个多点触摸手势库，能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件，免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。

hammer.js 不但支持触摸屏设备的浏览器，在桌面浏览器上，也能将鼠标的点击当做触摸，方便开发人员在桌面浏览器上调试。（JS仔在自己的随手背项目里面也用了hammer.js，真心好用）

直接上代码（在.html文件中的之间添加如下语句）：

hammer.js 其他的使用方式简介，直接看代码：

 
 
// 先要对监听的DOM进行一些初始化
var hammer = new Hammer ( document . getElementById ( "container" ) ) ;
 
// 然后加入相应的回调函数即可
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插件的形式调用：
 
 
$ ( "#element" )
   . hammer ( {
         // 对DOM进行一些初始化，这里可以加入一些参数
   } )
   . bind ( "tap" , function ( ev ) {
         console . log ( ev ) ;
   } ) ;

感谢各位的阅读！关于“javascript如何实现禁止缩放”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！