前言

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[0].clientX - 25 + "px";
})

结果会是这样的:

会将整个页面一同拽向目标方向(右下角),这即是浏览器默认行为和自定义行为同时生效的结果.

这样弄体验是十分糟糕的,首先div实际挪动的距离比我手指拖动的距离要小很多,感觉像是在推磨.
其次鼠标所在位置一旦撞到视口边缘就不能再继续向这个方向拖动,得松开再来一次,总之,十分不爽.

二、可取的值 && 效果演示

touch-action用于设置浏览器如何响应触屏用户的拖拽,平移,拉伸等操作;

属性	说明
touch-action: pan-up;	禁止由下向上拖动时的默认行为, 横向全部禁止
touch-action: pan-down;	禁止由上向下拖动时的默认行为, 横向全部禁止
touch-action: pan-right;	禁止由左向右拖动时的默认行为, 纵向全部禁止
touch-action: pan-left;	禁止由右向左拖动时的默认行为, 纵向全部禁止
touch-action: pan-x;	仅清除纵向拖动默认行为
touch-action: pan-y;	仅清除横向拖动默认行为
touch-action: auto;	默认,交给浏览器来相应这些操作
touch-action: none;	清除所有关于拖动的默认行为,完全不让动. “我买几个橘子去. 你就在此地, 不要走动.”

演示过程中每次改变拖动方向都是重新按下再拖的.

1.pan-up;

2.pan-down

3.pan-right

4.pan-left

5.none

你的尝试结果可能会与我的有些偏差,请看第三段的解释.

三、注意

注意除了none之外, 其他几个属性的"允许某方向上的拖动", 都是指按下去后在那个可拖动方向的执行的首次拖动,只有那一次是被允许的.
但若是我在pan-up的情况下按下去, 先向下拖了(这是能拖的), 但是我不松开手继续往左往右的乱拖一气然后再往下拖, 那就不能下拖了,可以去试一下:

div {position: absolute;top: 100px;left: 100px;height: 60px;width: 60px;touch-action: pan-up;border-radius: 45%;background-color: rgba(0, 255, 255, 0.63);
}

    <div>div01</div>

//JS,其实不用写;
var div = document.querySelector("div");
div.addEventListener("touchmove", function (e) {div.style.top = e.touches[0].clientY - 25 + "px";div.style.left = e.touches[0].clientX - 25 + "px";
})

你必须得把手松开然后才能再下拖;

总结

[CSS3] touch-action设置移动端拖动行为相关推荐

ServiceNow 中关于UI Action 在portal端的使用
在 portal端是可以使用Form和UI Action的, 例如: var data.f= $sp.getForm()://需要添加上相应参数在开箱组件'Form'的Server script中就 ...
移动端ajax,jQuery基于$.ajax设置移动端click超时处理方法
本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法.分享给大家供大家参考,具体如下: 这里介绍jquery click事件如何在移动端自动转换成touchstart事件. 因为 ...
移动端上下拖动调整顺序效果_vue实现移动端拖动排序
本文实例为大家分享了vue实现移动端拖动排序的具体代码,供大家参考,具体内容如下效果代码: class="childDiv" v-for="(option,index ...
HTML5移动端拖动惯性
下面代码只是实现了上下滑动惯性,没有写水平滑动惯性.(临时代码笔记,可能会在以后的过程中不断更新优化代码) /*** 惯性原理:* 产生的速度 = 移动距离 / 移动时间* 距离 = 松开的坐标 - ...
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样? <!DOCTYPE html> <html lang="en"> <head& ...
Discus 论坛在 pc 电脑上访问手机版 ( mobile ) 和触屏版（touch）设置
Discus 论坛在 pc 电脑上访问手机版 ( mobile ) 和触屏版(touch)设置 1. 更改用户代理 user agent 一般在浏览器上安装UserAgent Switcher ...
设置textarea不可拖动
默认情况下,我们将鼠标移动到textarea的右下角时发现文本域是可以通过拖动的方式改变其大小的,这会影响我们原本的页面布局. 若想设置其不可拖动,可为其添加如下属性: <textarea st ...
html移动端隐藏div,bootstrap 如何设置移动端元素隐藏
bootstrap设置移动端元素隐藏的方法:首先打开相应代码文件:然后使用Bootstrap的网格系统:最后通过"visible-xs-block"设置在超小设备手机显示隐藏即可. ...
css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效
特效描述:利用CSS3实现 3D滑块进度条拖动动画特效.利用CSS3实现3D滑块进度条拖动动画特效代码结构 1. HTML代码 Scalable 3D Range Sliders Simple ...

[CSS3] touch-action设置移动端拖动行为

文章目录

前言