正文 

当前位置： 首页 > 知识 >

CSS touch-action：在 Cordova 应用程序中并不总是禁用

     2023-05-06     107

关键词：

【中文标题】CSS touch-action：在 Cordova 应用程序中并不总是禁用【英文标题】：CSS touch-action: not always disabling in Cordova app 【发布时间】：2018-10-13 02:31:09 【问题描述】：

问题

我在我的 CSS 中缺少什么以使我的 Cordova 应用程序中的无触摸操作的结果更加一致？

我正在使用 Cordova 构建一个应用程序（在 Android 上测试）。我们有一个不应该滚动的完整页面选择，所以我在 CSS 中使用了touch-action: none。但它仍然滚动，但只是有时。

CSS

body 
    touch-action: none;

现在我通过打开/关闭 html 中的不同 div 来显示不同的“页面”。让我超级困惑的是，当它进入第一页时，它会滚动......一次！而且只有一次。所以我可以点击屏幕并向上/向下拖动页面，放开我就不能再滚动了。

但是。 我转到第二页，它会做同样的事情。它会让我滚动一次，但任何进一步的触摸事件都会被忽略。

这个问题是我喜欢的 html 选择器受此影响。它可以在哪里工作，但定期允许页面在不应该滚动的时候滚动。

我的理解是“touch-action: none”应该杀死 Android 上的所有触摸事件，而不仅仅是其中的一些。

【问题讨论】：

【参考方案1】：

经过更多的挖掘，我能够解决这个问题。

快速回答。 touch-action: none; 完全没问题。

我使用 Chrome 的远程开发人员工具连接到设备并观看控制台并不好。查看应用程序在运行时发生了什么。因为您可以通过开发人员工具触摸应用程序，所以我猜它正在设法搞砸触摸事件。就像忽略touch-action:none 并强制触摸动作发生一样。即使您通过开发人员工具仅触摸了真实设备而不是设备“sim”，它仍然会搞砸触摸事件。

所以解决方案。您可以使用开发人员工具来确保您已正确添加 css。然后关闭设备的开发人员工具并使用cordova run android 在cordova 中再次运行它，并且不要使用开发人员工具进行连接。

我花了两个工作日试图解决这个问题。 :(

【讨论】：

vue项目中出现不能左右滑动的问题

 CSS属性：touch-action，解决移动端点击事件延迟https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-actionCSS属性touch-action用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如浏览器自带的划动、缩放等）。我们平... 查看详情

解决移动端报错：unabletopreventdefaultinsidepassiveeventlistenerduetotargetbeingtreatedas……(代码片段)

解决移动端报错：UnabletopreventDefaultinsidepassiveeventlistenerduetotargetbeingtreatedas……报错如下：解决办法：//在容器css样式添加如下代码touch-action:pan-y;//或者设置全局css*touch-action:pan-y; 查看详情

unabletopreventdefaultinsidepassiveeventlistenerduetotargetbeingtreatedaspassive.seeh(代码片段)

...dEventListener(‘touchmove‘,func,passive:false)2、应用CSS属性 touch-action:none; 这样任何触摸事件都不会产生默认行为，但是touch事件照样触发。touch-action还有很多选项，详细请参考touch-action 查看详情

解决移动端报错：unabletopreventdefaultinsidepassiveeventlistenerduetotargetbeingtreatedas……(代码片段(代码片段)

解决移动端报错：UnabletopreventDefaultinsidepassiveeventlistenerduetotargetbeingtreatedas……报错如下：解决办法：//在容器css样式添加如下代码touch-action:pan-y;//或者设置全局css*touch-action:pan-y; 查看详情

touch-actioncss属性滚动和缩放手势

CSS属性touch-action用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作(比如浏览器自带的划动，缩放等)默认情况下，平移(滚动)和缩放手势由浏览器专门处理。该属性用于取消浏览器默认手势行为，开发人员自定... 查看详情

怎么解决unabletopreventdefaultinsidepassiveeventlistenerduetotarget

...ntListener('touchmove',func,passive:false)2、应用CSS属性 touch-action:none; 这样任何触摸事件都不会产生默认行为，但是touch事件照样触发。touch-action还有很多选项，详细请参考touch-action[注]未来可能所有的元素的touchstarttouchmove... 查看详情

[问题解决]unabletopreventdefaultinsidepassiveeventlistenerduetotargetbeingtreatedaspassive.(代码片段)

...ntListener('touchmove',func,passive:false)方案2、应用CSS属性touch-action:none;这样任何触摸事件都不会产生默认行为，但是touch事件照样触发。例使用全局样式样式去掉默认行为*touch-action:none;补充：touch-action也可取一下值none：当触控... 查看详情

报错：unabletopreventdefaultinsidepassiveeventlistenerduetotargetbeingtreatedaspassive(示例

...EventListener(‘touchmove‘,func,passive:false)2.为容器设置css属性touch-action，去除滑动时默认现象产生，但不影响事件触发touch-action:none; 查看详情

手势在文本区域或输入中开始时的触摸动作行为

...文本区域或输入中开始时的触摸动作行为【英文标题】：touch-actionbehaviorwhengesturebeginsintextareaorinput【发布时间】：2020-10-1722:19:25【问题描述】：似乎当手势以textarea或input开始时，touch-action会被忽略。这对我来说是出乎意料的。... 查看详情

如何在 iOS 中禁用单个 HTML 元素的触摸操作

...我需要禁用对html元素的触摸操作。我已经厌倦了CSS属性touch-action:none。但它不适用于Safari和iOS设备。有什么方法可以在iOS上禁用html元素的触摸操作。【问题讨论】：【参 查看详情

vue-touch不能上下滑动的问题解决(代码片段)

...的CSS覆盖就行了。但写的时候发生一个小插曲，加了一个touch-action:pan-y!important;没起作用。后来发现原来是<v-touchv-on:swipeleft="getNext"v-on:swiperight="getPrev"tag="div"class="v-touch">在引用之后会变成<div>标签所以只需要给后面加一... 查看详情

防止整页缩放

...。此页面将显示在触摸屏上。在顶部区域（地图）上使用touch-action:pinch-zoom时，我想将索引（底部区域）与缩放隔离开来。我尝试在顶部使用iframe，但它一直在缩放整个页面【问题讨论】：【参考方案1】：尝试将其添加到HTML文 查看详情

html+css+js实现❤️three3d铅笔绘图工具特效❤️(代码片段)

 效果演示：  代码目录：主要代码实现：部分CSS样式：#mfPreviewBardisplay:none!important;html,bodyposition:fixed;overflow:hidden;touch-action:none;bodybackground-color:#f7f4f0;cursor:url(" 查看详情

如何在 React JS 页面中使用 Cordova 插件

】如何在ReactJS页面中使用Cordova插件【英文标题】：HowtouseaCordovaplugininreactJSpage【发布时间】：2018-11-0710:28:03【问题描述】：我想在我的reactJS应用程序中使用一些Cordova插件，但该应用程序一直失败。我知道cordova仅在运行时可用... 查看详情

h5移动端在阻止touchstart的默认事件时报错(代码片段)

h5移动端在阻止touchstart的默认事件时报错  解决办法，可以添加*touch-action:none;即可消除错误 查看详情

移动端报错:unabletopreventdefaultinsidepassiveeventlistenerduetotargetbeingtreatedaspassive(代码片段)

...edaspassive的错：  解决方案：给html加上CSS属性 touch-action:none; 这样任何触摸事件都不会产生默认行为，但是t 查看详情

AngularJS 的 Apollo 客户端

...信前端我正在尝试在前端设置一个Apollo客户端，使用我的Cordova应用程序和AngularJS。搜索Apollo客户端，我找不到任何对AngularJS和Cordov 查看详情

Cordova 无法加载 platformapi

】Cordova无法加载platformapi【英文标题】：CordovaUnabletoloadplatformapi【发布时间】：2018-03-2916:39:42【问题描述】：我这几天一直有这个问题。Cordova无法在浏览器中运行，错误提示浏览器未添加为平台。但是，尝试将浏览器添加为平... 查看详情