前言

touch-action是一个用于解决 [移动端屏幕拖动默认行为造成的诸多不便] 的CSS属性,它可以改变浏览器对于"拖动"这一行为的应对策略, 我挑了几个感觉比较用得上的来记录,每一个都做了下演示.

一、什么是浏览器默认行为？

你要是知道的话可以直接去目录跳过这段了…

浏览器默认行为即是浏览器自带的对某些事件的处理方法.
比如:
写Vue时会覆盖掉全局样式的浏览器自带样式,
点击type为"submit"的input会提交表单,
a标签会引起跳转;

如此种种初衷是好的,但未必会带来好的结果,就拿拖拽动作来举例,如果我打算拖动页面中的一个div01, 直接让div01监听touchmove事件:

div.addEventListener("touchmove", function (e) {
   
    div.style.top = e.touches[0].clientY - 25 + "px";
    div.style.left = e.touches[