禁止触屏滑动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 事件
如果您对本文有什么疑问,欢迎提出个人见解,若您觉得本文对你有用,不妨帮忙点个赞,或者在评论里给我一句赞美,小小成就都是今后继续为大家编写优质文章的动力, 欢迎您持续关注我的博客:)
作者:Jesse131
出处:http://www.cnblogs.com/jesse131/
关于作者:专注前端开发。如有问题或建议,请多多赐教!
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。