npm 包 touchaction-property 使用教程

前言：本文将介绍如何使用 npm 包 touchaction-property，帮助前端工程师解决在移动端页面开发中遇到的 touch-action 兼容性问题。

什么是 touch-action？

touch-action 是一个 CSS 属性，可以用于设置用户在移动设备上进行触屏操作时，浏览器如何响应这些操作。它有以下几个可能的取值：

• auto：浏览器自己决定响应方式；
• none：告诉浏览器忽略这些操作；
• pan-x/pan-left/pan-right/pan-y/pan-up/pan-down：对应允许元素在 x/y 轴上拖动。

touch-action 在移动端开发中很常用，比如可以控制某个元素上下滑动时是否阻止整个页面滚动。但是 touch-action 存在许多兼容问题，不同设备、不同浏览器对它的支持是不一样的，开发中经常会遇到不能兼容某些设备的情况。

touchaction-property 是什么？

touchaction-property 是一个解决 touch-action 兼容性问题的 npm 包。它会根据你设置的 touch-action 属性值，动态地插入一些 CSS 规则，使得页面能在不同设备或浏览器上以一致的方式响应触屏事件。

如何使用 touchaction-property？

安装

安装 touchaction-property 只需要一行命令：

npm install touchaction-property --save

引用

接着在代码中引用即可。有多种引用方式，这里我们以 CommonJS 模块为例：

const touchActionProperty = require('touchaction-property');

使用

我们可以在需要设置 touch-action 的元素上，通过 touchActionProperty.set(ele, value) 函数来设置。其中 ele 为 DOM 元素，value 为 touch-action 属性值，可以是字符串或数组。

示例代码：

const touchActionProperty = require('touchaction-property');

const ele = document.querySelector('.my-ele');
touchActionProperty.set(ele, 'none');

有些情况下，需要全局设置 touch-action，以避免在多个元素上重复设置。可以这样：

touchActionProperty.set(document.documentElement, 'none');

这样就能将整个页面的 touch-action 都设置为 none 了。

高级使用

touchaction-property 还提供了一些其他的函数，用来更精细地控制 touch-action 等。

touchActionProperty.preventDocumentYScroll()

在某些场景下我们需要阻止整个文档区域在 Y 轴上的滚动，而让某个元素拖动。这时可以使用该函数，它会将整个文档区域的 touch-action 设置为 pan-x。

示例代码：

const touchActionProperty = require('touchaction-property');

const ele = document.querySelector('.my-ele');
touchActionProperty.set(ele, 'pan-y');

touchActionProperty.preventDocumentYScroll(); // 防止整个文档在 Y 轴上滚动

touchActionProperty.restoreDocumentYScroll()

还原整个文档区域在 Y 轴上的滚动。

示例代码：

const touchActionProperty = require('touchaction-property');

touchActionProperty.restoreDocumentYScroll();

总结

touch-action 是很常用的属性，但是在移动端兼容性存在问题。touchaction-property 的出现，可以帮助前端工程师缩减重复代码、避免兼容性问题，提高开发效率。希望本篇文章能对你有所帮助，也欢迎提出意见或疑问。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56788