由此找了其他的属性值 发现还挺强大的 touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left...; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action...: pinch-zoom; touch-action: manipulation; /* Global values */ touch-action: inherit; touch-action: initial...; touch-action: unset; 默认情况下，平移（滚动）和缩放手势由浏览器专门处理。...html { touch-action: manipulation; }
前言 相信大家搜css touch-action很容易搜到一批文章，但感觉自己还是需要写下自己这这个过程中的一些探索经历。...使用css touch-action的原因 在其官方的说明中：是否，以及以何种方式，给定的区域，可以由用户通过触摸屏操作（例如，通过平移或缩放内置的浏览器功能） 但我最初并不是因为这个来使用它的，...这个就要看下touch-action的更官方的触摸说明了。 默认情况下，平移（滚动）和捏手势由浏览器独占处理。...文档参考来源：touch-action 说人话 这段话阐明的就是触摸事件整个的进行过程，既然它可以通过css来约定滚动的行为，那么就意味着你写了touch-action:none,就会导致原来的页面滚动失效了...更多延伸与拓展 通过touch-action可以做什么效果呢？
确实不可以，但移动端则有另外一个特殊属性具有异曲同工之处，那就是 touch-action。...顾名思义，该属性是用于设置触摸屏如何操纵元素区域动作，同样的，touch-action 可以禁用浏览器在移动端处理手势的事件，进而提高页面滚动性能，同时它还能解决移动端 点击延迟问题（很多人可能只知道viewport...全局生效要写在 html 上：html { touch-action: manipulation;}类似的，如果移动端有自定义拖动的需求，也可以用这个 CSS 来优化性能，当我们需要完全阻止原生touch...事件时JS设置 touch-action 为 none，不需要再还原即可。...还有很多可选值相关资料传送门： MDN - CSS - pointer-events MDN - CSS - touch-action 以上就是文章的全部内容，希望对你有所帮助！
根据规范，CSS 属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。...touch-action 默认值是 auto，当设置为 none 时会禁止用户缩放，能成功解决 300ms 延迟的问题，如： a[href], button { touch-action: none...2014年3月13日，W3C 规范增添了新的 touch-action 属性值 manipulation。...touch-action: manipulation 规定浏览器只允许进行滚动和持续缩放操作。任何其它被 touch-action: auto 支持的行为不被支持。...代码如下： html { touch-action: manipulation; } 从此，移动端点击事件延迟正式宣告消亡。
css 处理 只要在页面上使用css样式 touch-action: none，就能禁止web在手机或平板上的缩放了。... 注意： 使用 touch-action: none 作用于html元素上，可以禁止页面缩放，因为该样式属性是非继承属性，不会影响页面子元素的手势操作...如果使用 * {touch-action: none;} 全局作用，则会影响子元素的各种手势操作。...] | manipulation; touch-action 属性值 auto 当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进行平滑、缩放等。...方法一：使用 touch-action 样式来禁止垂直平移的默认行为 touch-action: pan-y; 方法二：监听 touch事件 中，明确设置 passive 为 false，声明不是被动的
touch-action CSS的touch-action属性用于设置触摸屏用户如何操纵元素的区域...touch-action：none; /* 浏览器兼容性 https://caniuse.com/#search=touch-action */ FastClick FastClick是FT Labs专门为解决移动端浏览器
可以通过在意外滚动发生的元素上添加CSS属性touch-action: none 来阻止滚动发生。继续阅读，你可以了解到更多相关技术的细节。...我们发现大量受影响的页面，通过使用touch-action这个CSS属性就能轻松修复（问题）。...如果你希望某个元素（无论进行任何 touch 操作都）不会使浏览器发生滚动或缩放，可以往该元素的CSS中加入touch-action: none。...如果想某个元素只可以水平滚动或缩放，可以使用touch-action: pan-y pinch-zoom。...开发者在需要时，应该在 touch 系列事件发生前，使用touch-action这一 CSS 属性去阻止某元素滚动或缩放。
其中有一个和点击延迟直接相关的实现 —— 一个名为 touch-action的新 CSS 属性。根据规范，touch-action 属性决定 “是否触摸操作会触发用户代理的默认行为。...touch-action的默为 auto，将其置为 none 即可移除目标元素的 300 毫秒延迟。...Polymer 则是通过判断标签上的 touch-action属性 (attribute)，而非 CSS 代码。 这对于我们开发者来说意味着什么？...然而，你若只想寻求一个解决 300 毫秒点击延迟的方法，上述方案可能就有点过了，因为它们要么是资源密集型的方案，要么是touch-action属性的非标准化模拟。...指针事件和css touch-action:新属性，可能存在浏览器兼容问题，如仅为解决点击延迟问题儿引入一整套指针事件有点过了。
注册处理函数时，用如下方式，明确声明为不是被动的 window.addEventListener('touchmove', func, { passive: false }) 2、应用 CSS 属性 touch-action...touch-action 还有很多选项，详细请参考touch-action [注]未来可能所有的元素的 touchstart touchmove 事件处理函数都会默认为 passive: true
4、IE11+浏览器设置了css的属性touch-action: manipulation，它会在某些标签（a，button等）禁止双击事件，IE10的为-ms-touch-action: manipulation...更改默认视口宽度 `` 缺点: 需要浏览器的支持 3. css touch-action...touch-action的默为 auto，将其置为 none 即可移除目标元素的 300 毫秒延迟 缺点: 新属性，可能存在浏览器兼容问题 4. tap事件 zepto的tap
注册处理函数时，用如下方式，明确声明为不是被动的 window.addEventListener(‘touchmove’, func, { passive: false }) 2、应用 CSS 属性 touch-action...touch-action 还有很多选项， 详细请参考：touch-action 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。
{ padding: 0 50px 40px; background-color: #fff; position: fixed; z-index: 999; } ✅ 解决方案A (touch-action...) 默认情况下，平移（滚动）和缩放手势由浏览器专门处理，但是可以通过 CSS 特性 touch-action 来改变触摸手势的行为。...摘取几个 touch-action 的值如下。 值 描述 auto 启用浏览器处理所有平移和缩放手势。 none 禁用浏览器处理所有平移和缩放手势。....popup { touch-action: none; } Note: [无障碍设计] 阻止页面缩放可能会影响视力不佳的人阅读和理解页面内容，不过小程序本身好像就不可以缩放！
如果我们不想这个时候整个页面进行滚动，就可以设置 overscroll-behavior-x: contain; 在内部的盒子中 缺点的话，就是浏览器的兼容性并不是特别理想，但对于我们 TOB 的项目来说是足够的了 其他：touch-action...这个方案是基于移动端开发的，实际上跟这次谈论的还是有点区别，这里单纯记录一下 MDN 中对 touch-action[4] 的解释如下 CSS 属性 touch-action 用于设置触摸屏用户如何操纵元素的区域...developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior-x [3]Demo 地址: https://codepen.io/gpingfeng/pen/eYgRNqX [4]touch-action...: https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action [5]overscroll-behavior: https://css-tricks.com
原因是他在全局设置了 touch-action这个属性为none。 CSS中，touch-action主要用来设置对一个区域的触摸行为可以有哪些操作，比如：缩放、平移、滚动等。...默认情况下，touch-action属性的值为auto，当设置为none时，我们触摸屏幕时不进行任何操作，所以页面就无法滚动。...当然touch-action还可以设置为其他值，比如： pan-x:启用单指水平平移手势。 pan-y:启用单指垂直平移手势。 manipulation:浏览器只允许进行滚动和持续缩放操作。 等。
left: 0; right: 0; bottom: 0; margin: auto; touch-action.../js/pep.js">
Authors can also opt in to fast-tap behavior on specific elements by using the CSS touch-action property
（可以讲一下pointer-events和touch-action属性吗） 问题解答 1.mouseover和mouseenter两个事件有什么区别？...（可以讲一下pointer-events和touch-action属性吗） css3中有两个属性是可以直接影响到JS中的事件的，他们是pointer-events和touch-action。...touch-action 用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如浏览器自带的划动、缩放等）。
webkit-appearance: button; cursor: pointer; display: inline-block; text-align: center; vertical-align: middle; touch-action
CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。...最简单方法是： html{ touch-action: none; touch-action: pan-y; } 还可以直接指定对应元素的宽度和overflow： html{ width: 100vw
height:200px;') canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
云直播
对象存储
