禁止缩放

触控板

触摸屏

css 处理

js 处理

扩展解读

touch-action

touch-action 属性值

wheel 与 mousewheel

passive

options参数

可能遇到的报错

禁止缩放

有天，辛苦做了个复杂操作功能的页面，上线后有用户反馈：很多功能使用不了。惊了，以为是哪里出了bug。
立马联系用户，才发现原来是用户使用笔记本电脑，没有禁用触控板，然后不小心碰到导致整个界面都放大，很多功能超出界面不见了。
然而那能怎么办，用户第一，自然得快速解决这个问题，而且是触控板和触摸屏都得解决。

在以前，如果要禁止移动端设备的触摸屏上，手指缩小放大的功能，都会想到使用viewport来处理。如下：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

然而，目前的浏览器已经不再支持 viewport 禁止缩放的定义。现在使用这段代码，已经彻底无效，要想解决问题，得想新的方案。

话不多说，下面先给出具体的解决办法。

触控板

要禁止触控板的缩放行为，需要处理鼠标滚轮事件：wheel 。
因为笔记本触摸板双指滑动，将响应该事件，如果对该事件阻止默认行为，就能解决缩放问题了。
注意：
passive: false 必须使用，下面会介绍。
此外，对 document 处理了滚轮事件后，因为该事件会传播冒泡，所以需要注意页面上其他的子元素——如果有滚动条之类的，需要在子元素上阻止冒泡，不然后滚动会失效。

// 触摸板禁止手指缩放
document.addEventListener('wheel', function(event) {event.preventDefault()
}, { passive: false })// 阻止子元素相同事件冒泡
// document.getElementById('app').addEventListener('wheel', function(event) {
//   event.stopPropagation()
// })

触摸屏

要禁止触摸屏的手指缩放，可以使用如下的CSS和JS两种方法。

css 处理

只要在页面上使用css样式touch-action: none，就能禁止web在手机或平板上的缩放了。

<html style="touch-action: none;">

注意：
使用 touch-action: none作用于html元素上，可以禁止页面缩放，因为该样式属性是非继承属性，不会影响页面子元素的手势操作。
如果使用* {touch-action: none;}全局作用，则会影响子元素的各种手势操作。

js 处理

使用js代码来禁止触摸屏的手指缩放，和处理触控板类似的，这里主要是监听几个手势事件，touchstart, touchend, touchmove等。
注意：需要注意的事项也会触控板处理时一样，加上{ passive: false }，并且对子元素进行阻止冒泡的操作。

document.addEventListener('touchstart', function(event) {event.preventDefault()
}, { passive: false })// 阻止子元素相同事件冒泡
// document.getElementById('app').addEventListener('touchstart', function(event) {
//   event.stopPropagation()
// })

扩展解读

touch-action

非继承属性，默认auto。
用于设置触摸屏用户如何操纵元素的区域，允许你在触控时控制滚动操作。
例如，浏览器内置的缩放功能。
这样做的好处还有，它可以允许你自己实现这些手势。
现代浏览器都支持该属性，但部分属性值只有chrome支持。

touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation;

touch-action 属性值

auto

当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进行平滑、缩放等。

none

当触控事件发生在元素上时，不进行任何操作。

pan-x

启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和／或 pinch-zoom 组合使用。

pan-y

启用单指垂直平移手势。可以与 pan-x 、pan-left 、pan-right 和／或 pinch-zoom 组合使用。

manipulation

这是pan-x pan-y pinch-zoom的别名。
浏览器只允许进行滚动和持续缩放操作，任何其它被auto值支持的行为不被支持。
启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。
禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。
触摸动作也经常用于完全解决由支持双击缩放手势引起的点击事件的延迟。

pinch-zoom

启用多手指平移和缩放页面。
这可以与任何平移值组合。

pan-left, pan-right,pan-up,pan-down

启用以指定方向滚动开始的单指手势。一旦滚动开始，方向可能仍然相反。
多个方向可以组合。
请注意，滚动向上（pan-up）意味着用户正在将其手指向下拖动到屏幕表面上，同样 pan-left 表示用户将其手指向右拖动。
这些值得兼容性较差，Chrome支持，IE\Firefox\Safari不支持。

wheel 与 mousewheel

mousewheel并不是标准特性，ie、chrome等浏览器支持，但firefox不支持。
firefox支持的是自定义的DOMMouseScroll事件。

wheel才是标准特性，现代浏览器基本都支持，建议使用wheel替代。

笔记本触摸板双指滑动，将响应滚轮事件，因此可以监听该事件，禁止触摸板手指缩放界面。
但需要注意滚轮默认事件，如会导致子元素滚动失效，这时候就要在子元素上阻止相同事件冒泡。

passive

passive是作为属性值，来自于事件监听函数addEventListener的可选属性options。
addEventListener的第三个属性还可以取布尔值，指示是否能冒泡。
需要注意的是：对于第三个参数，IE只支持布尔值，不支持属性对象options；而部分属性值，也有浏览器不支持。

target.addEventListener(type, listener, options);

options参数

可选参数可用的属性如下：

capture: Boolean，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
once: Boolean，表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。
signal：AbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除。Safari不支持。
mozSystemGroup: 只能在 XBL 或者是 Firefox 使用，这是个 Boolean，表示 listener 被添加到 system group。
passive: Boolean，设置为true时，表示 listener 永远不会调用 preventDefault()。

passived实际上就是告诉浏览器，某个事件监听是否会使用preventDefault来阻止默认行为，便于浏览器优化性能。特别是浏览器优化页面滚动时的性能，可以让页面滚动更顺滑。
在Chrome中，wheel / touch等事件中的passive会默认设置为true，但Safari不支持。
添加passive参数为true后，touchmove事件不会阻塞页面的滚动（同样适用于鼠标的滚轮事件）。

如果passive设置为true，而listener仍然调用了preventDefault，则浏览器客户端将会忽略它，并抛出一个控制台警告：
Unable to preventDefault inside passive event listener invocation。

可能遇到的报错

Unable to preventDefault inside passive event listener due to target being treated as passive。

由于目标被视为被动，因此无法在被动事件侦听器中阻止默认行为。
可能的发生情景：移动端使用touch事件后，垂直平移时的报错。

方法一：使用touch-action样式来禁止垂直平移的默认行为

touch-action: pan-y;

方法二：监听touch事件中，明确设置passive为 false，声明不是被动的。

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

禁止触摸屏触控板手指缩放，需要这样处理相关推荐

mac idea 触控板缩放字体大小
在 Mac 上使用触控板来放大图像您可以使用触控板来放大屏幕的部分区域. 在 Mac 上,选取苹果菜单 >"系统偏好设置",点按"辅助功能",然后点按 ...
计算机触摸屏驱动版本在哪看,求解答笔记本触控板驱动在哪
rowe木易回答数:27240 | 被采纳数:185 2017-02-25 10:27:47 Fn+F8组合键,笔者笔记本是联想的,可通过此法关闭触控板,如遇到个别笔记本电脑通过此方法不能关闭触 ...
微软浏览器适配问题前端_「图」微软新贡献：修复Chromium浏览器的奇怪触控板手势问题...
去年微软宣布计划成为Chromium项目的重要贡献者之一,希望为包括Edge和Chrome在内所有基于Chromium的浏览器带来更多改进和功能.在增强鼠标滚动和搜索功能之外,微软现在将部分精力放在部 ...
黑苹果没有找到触控板为什么还是能用_为什么Macbook触控板体验领先Windows那么多，却难以取代鼠标？...
用年轻的心态看缤纷的世界关于Mac优异的触控板体验这个问题,早已名声在外,用户的评价几乎也都是出奇的一致,那就是"方便,好用".相信很多人也都是"未用其本,先闻其名&q ...
win10专业版没有触摸板选项_Windows10触控板的正确使用方法
如何正确使用Windows10系统的触控板?Windows的触控板虽然不及macBook,但是它的功能也不能小觑哦!如果你觉得Windows的触控板太LOW了,可能是你的使用方法不对.下面小编给大家分 ...
惠普触控板使用指南_Windows10触控板的正确使用方法
如何正确使用Windows10系统的触控板?Windows的触控板虽然不及MacBook,但是它的功能也不能小觑哦!如果你觉得Windows的触控板太LOW了,可能是你的使用方法不对.下面小编给大家分 ...
华为笔记本触控板手势操作_如何在笔记本电脑触控板上使用Windows 8的手势
华为笔记本触控板手势操作 While Windows 8 may seem a bit out of place on hardware without a touch screen, trackpa ...
得此触控板，一览众山小！
钱能买来快乐么?我想答案是肯定的. 当你花几百块买了一只钢笔,你的快乐可能会持续几天.当你花几千块买了一台手机,你的快乐可能会持续几个月.当你省吃俭用.精打细算.费尽心机.呕心沥血.吃菜不吃肉.米饭吃 ...
苹果OS X系统常用键盘快捷键和触控板使用技巧总结
前两天刚刚买了一台MacBook Air,系统是OS X 10.8(Mountain Lion).对于用惯了Windows GUI的我来说,很多命令找不到了,很不习惯.经过这几天的摸索,越来越感觉苹果 ...

禁止触摸屏触控板手指缩放，需要这样处理

禁止缩放

触控板

触摸屏

css 处理

js 处理

扩展解读

touch-action

touch-action 属性值

wheel 与 mousewheel

passive

options参数

可能遇到的报错

禁止触摸屏触控板手指缩放，需要这样处理相关推荐

最新文章

热门文章