触摸屏触控板禁止手指缩放，这样的代码才有用

禁止缩放

有天，辛苦做了个复杂操作功能的页面，上线后有用户反馈：很多功能使用不了。惊了，以为是哪里出了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' chrome 使用，这是个 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 });

作者：jimojianghu
链接：https://juejin.cn/post/7028774382654717983
来源：稀土掘金

链接: https://fly63.com/article/detial/10783