zoukankan      html  css  js  c++  java
  • 禁止触屏滑动touchmove方法介绍

    在移动端页面开发中,有时需要禁止用户滑动屏幕,搜索了好久才找到移动终端的touch事件,touchstar,touchmove,touchend.

    阻止滚动

    一些移动设备有缺省的touchmove行为,比如说经典的iOS overscroll效果,当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱,但要禁用它很容易。

    document.body.addEventListener('touchmove', function(event) { 
    event.preventDefault(); 
    }, false);

    具体参见 移动互联网终端的touch事件,touchstart, touchend, touchmove

    在PC端页面开发中,可以设置onmousewheel,其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:”DOMMouseScroll” (事件和事件属性的测试案例)。 

    var addEvent = (function(){ 
    if (window.addEventListener) { 
    return function(el, sType, fn, capture) { 
    el.addEventListener(sType, fn, (capture)); 
    }; 
    } else if (window.attachEvent) { 
    return function(el, sType, fn, capture) { 
    el.attachEvent("on" + sType, fn); 
    }; 
    } else { 
    return function(){}; 
    } 
    })(), 
    stopEvent: function(event) { 
    if (event.stopPropagation) { 
    event.stopPropagation(); 
    } else { 
    event.cancelBubble = true; 
    } 
    if (event.preventDefault) { 
    event.preventDefault(); 
    } else { 
    event.returnValue = false; 
    } 
    }, 
    zoomIn = function(){}, 
    zoomOut = function(){}, 
    // isFirefox 是伪代码,大家可以自行实现 
    mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel"; 
    // object 是伪代码,你需要注册 Mousewheel 事件的元素 
    addEvent(object, mousewheel, function(event){ 
    var delta = 0; 
    event = window.event || event; 
    stopEvent(event); 
    delta = event.wheelDelta ? (event.wheelDelta / 120) : (- event.detail / 3); 
    // zoomIn, zoomOut 是伪代码,需要实现的缩放事件 
    delta > 0 ? zoomIn(delta): zoomOut(Math.abs(delta)); 
    } , false);
    

      具体参见浅谈 Mousewheel 事件

  • 相关阅读:
    关于JSON可能出现的错误,待更/todo
    mongoose的安装与使用(书签记录) 2017
    HTTP的学习记录3--HTTPS和HTTP
    HTTP的学习记录(二)头部
    HTTP(一)概述
    LeetCode 455. Assign Cookies
    LeetCode 453. Minimum Moves to Equal Array Elements
    LeetCode 448. Find All Numbers Disappeared in an Array
    LeetCode 447. Number of Boomerangs
    LeetCode 416. Partition Equal Subset Sum
  • 原文地址:https://www.cnblogs.com/jesse131/p/5071313.html
Copyright © 2011-2022 走看看