前端报错adding CSS “touch-action: none“ to this element解决方案

news2024/11/13 15:03:21

目录

如图所示控制台出现报错:

原因:

touch-action 介绍:

解决方案:

1.手动设置touch-action:

 2.使用条件渲染:

3.CSS样式隔离:

4.浏览器兼容性:

5. 忽略警告


如图所示控制台出现报错:

 报错定位:本人在这个页面引入了一个组件,而那个组件是需要进行拖拽或者滑动之类的操作,在此之前没有出现报错的,应该就是这里的问题。

这应该与浏览器尝试优化滚动性能或触摸事件的处理有关,他报错的意思是需要我们再在css中添加一个css属性。

原因:

  1. 第三方库或框架:有些第三方库(如滑动库、拖拽库等)可能会自动给元素添加touch-action: none;,以防止默认的滚动行为干扰其自定义的滑动或拖拽逻辑

  2. 浏览器优化:现代浏览器会尝试预测用户的意图,以提高页面的响应性和滚动性能。当浏览器检测到元素可能阻止默认滚动行为时,它可能会发出警告。

touch-action 介绍:

touch-action CSS属性是用来指定一个区域(例如一个按钮或整个页面)是否以及如何响应触摸事件(如滑动或缩放)的。

最常见的用法禁用元素(及其不可滚动的后代)上的所有手势,以使用自己提供的拖放和缩放行为(如地图或游戏表面)。

#map {
  touch-action: none;
}

另一种常见的模式是使用指针事件处理水平平移的图像轮播,但不想干扰网页的垂直滚动或缩放。

.image-carousel {
  width: 100%;
  height: 150px;
  touch-action: pan-y pinch-zoom;
}

触摸动作也经常用于完全解决由支持双击缩放手势引起的点击事件的延迟

html {
  touch-action: manipulation;
}

解决方案:

1.手动设置touch-action:

使用一个div盒子包裹你的组件并在标签上添加 touch-action: none

我是这样解决的,报错信息让你加你就加呗,添加行内也行,看自己啦

<template>  
  <div class="my_component">  
    <!-- 组件内容 -->  
  </div>  
</template>
.my_component {  
  touch-action: none; /* 只在需要的元素上设置 */  
}

 2.使用条件渲染

如果touch-action: none;是在特定条件下需要的,考虑使用Vue的条件渲染(如v-if)来动态添加或移除这个样式。

:style="`touch-action:${setTouch?'auto':'none'} ;`"

3.CSS样式隔离:

确保你的CSS样式不会意外地影响到不应该影响的元素。使用更具体的选择器来定位需要这个属性的元素。,同时在当前页面添加scoped,使当前页面的css样式独立

<style scoped>

4.浏览器兼容性

浏览器是否支持touch-action属性。(见下图)

5. 忽略警告

如果这个警告不影响你的应用的功能或性能,你可以选择直接忽略它。然而,最好是解决潜在的问题,以确保应用的最佳性能和用户体验。

 结束啦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1931284.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

持续集成04--Jenkins结合Gitee创建项目

前言 在持续集成/持续部署&#xff08;CI/CD&#xff09;的旅途中&#xff0c;Jenkins与版本控制系统的紧密集成是不可或缺的一环。本篇“持续集成03--Jenkins结合Gitee创建项目”将引导如何将Jenkins与Gitee&#xff08;一个流行的Git代码托管平台&#xff09;相结合&#xff…

华为USG6000V防火墙安全策略用户认证

目录 一、实验拓扑图 二、要求 三、IP地址规划 四、实验配置 1&#x1f923;防火墙FW1web服务配置 2.网络配置 要求1&#xff1a;DMZ区内的服务器&#xff0c;办公区仅能在办公时间内(9:00-18:00)可以访问&#xff0c;生产区的设备全天可以访问 要求2&#xff1a;生产区不…

手机误删图片怎么办?2个照片恢复大师来帮忙,轻松找回

手机照片早已成为我们日常生活中的一部分&#xff0c;记录着欢笑、泪水等各种瞬间。但有时候&#xff0c;因为各种原因&#xff0c;它们会突然消失&#xff0c;让人痛心疾首。照片恢复有哪些方法呢&#xff1f;别急&#xff0c;今天就给大家带来2位照片恢复大师&#xff0c;它们…

中国姓名学大师排行榜,山东济南最有名的起名大师是谁

在2024年揭晓的中国姓名学领域&#xff0c;一场声势浩大的评选活动吸引了无数目光——寻找国内最杰出的起名大师。在这场激烈的竞争中&#xff0c;山东济南的颜廷利教授以其深厚的易学功底和卓越的命名技艺&#xff0c;荣获“中国姓名学十大权威专家”榜首位置&#xff0c;成为…

【深度学习】BeautyGAN: 美妆,化妆,人脸美妆

https://www.sysu-hcp.net/userfiles/files/2021/03/01/3327b564380f20c9.pdf 【深度学习】BeautyGAN: Instance-level Facial Makeup Transfer with Deep Generative Adversarial Network BeautyGAN: Instance-level Facial Makeup Transfer with Deep Generative Adversaria…

NSSCTF中24网安培训day2中web题目【下】

[NISACTF 2022]easyssrf 这道题目考察的是php伪协议的知识点 首先利用file协议进行flag查找 file:///flag.php 接着我们用file协议继续查找fl4g file:///fl4g 接着我们访问此文件&#xff0c;得到php代码如下 这里存在着stristr的函数&#x…

AI视频教程下载-ChatGPT速成课程:工作中的ChatGPT入门

使用ChatGPT提升你的生产力&#xff1a;利用OpenAI的革命性ChatGPT模型。 你准备好深入人工智能交流的世界&#xff0c;彻底改变你的职业生涯了吗&#xff1f;本课程适合技术背景和非技术背景的人士&#xff0c;它以独特、有趣且专业的方式&#xff0c;教授如何使用OpenAI的Ch…

【鸿蒙OS】【ArkUI】鸿蒙OS UI布局适配终极攻略

鸿蒙OS UI布局适配终极攻略 像素适配大法&#xff0c;此方法也适合Android ArkUI为开发者提供4种像素单位&#xff0c;框架采用vp为基准数据单位。 vp相当于Android里的dp fp相当于Android里的sp 官方是如何定义的呢,如下图 今天我来教大家如何用PX做到ArkUI的终级适配&…

【python】Pandas 运行报错分析:KeyError: Label not found

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

Docker基本讲解及演示

Docker安装教程 Docker安装教程 1、Docker介绍 Docker是一个开源的应用容器引擎&#xff0c;允许开发者将应用程序及其依赖项打包成一个轻量级、可移植的容器&#xff0c;然后发布到任何支持 Docker 的环境中运行&#xff0c;无论是开发机、测试机还是生产环境。 Docker基于…

CentOS 7 网络配置

如想了解请查看 虚拟机安装CentOS7 第一步&#xff1a;查看虚拟机网络编辑器、查看NAT设置 &#xff08;子网ID&#xff0c;网关IP&#xff09; 第二步&#xff1a;配置VMnet8 IP与DNS 注意事项&#xff1a;子网掩码与默认网关与 第一步 保持一致 第三步&#xff1a;网络配置…

EXCEL VBA工程密码破解 工作表保护破解

这里写目录标题 破解Excel宏工程加密方法一 新建破解宏文件方法二 修改二进制文件 破解工作表保护引用 破解Excel宏工程加密 如图所示 白料数据处理已工程被加密。 方法一 新建破解宏文件 1 创建一个XLSM文件&#xff0c;查看代码 ALTF11 2 新建一个模块&#xff0c;“插…

打包一个自己的Vivado IP核

写在前面 模块复用是逻辑设计人员必须掌握的一个基本功&#xff0c;通过将成熟模块打包成IP核&#xff0c;可实现重复利用&#xff0c;避免重复造轮子&#xff0c;大幅提高我们的开发效率。 接下来将之前设计的串口接收模块和串口发送模块打包成IP核&#xff0c;再分别调用…

Vue+Echarts做图表展示

1.Echarts安装 终端运行安装命令&#xff1a; npm install echarts -s 在main.js做全局引用&#xff1a; //引入echarts import * as echarts from echarts //vue全局注入echarts Vue.prototype.$echarts echarts; 2.页面使用Echarts画柱状图和饼图 效果&#xff1a; 代码展…

Qt各个版本安装的保姆级教程

文章目录 前言Qt简介下载Qt安装包安装Qt找到Qt的快捷方式总结 前言 Qt是一款跨平台的C图形用户界面应用程序开发框架&#xff0c;广泛应用于桌面软件、嵌入式软件、移动应用等领域。Qt的强大之处在于其高度的模块化和丰富的工具集&#xff0c;可以帮助开发者快速、高效地构建出…

esplice老项目(非maven)导入idea问题

解决导入idea显示不正常 老项目导入idea后&#xff0c;显示为如下所示&#xff1a; 显示的不太正常&#xff0c;正常显示为下面这个样子&#xff1a; 解决 非老项目 idea的项目中所有的文件全部变成了.java(已解决) 老项目 以下内容参考&#xff1a;idea导入项目后java文…

阿里云CDN架构技术(一)

CDN补充 cdn内容分发网络&#xff08;content delivery network&#xff0c;cdn&#xff09; 构建在互联网TCP/IP四层模型之上对用户透明的覆盖网。 该网络通过全球范围内分布式部署边缘服务器&#xff0c;将互联网内容从互联网中心缓存到靠近用户的边缘服务器上&#xff0c;…

SymPy,一个可以做数学题的Python库,如何使用SymPy进行微积分计算?

SymPy 是一个 Python 库&#xff0c;用于符号数学。这意味着 SymPy 可以帮助用户执行从基本代数到微积分、方程求解、积分、极限、级数、几何、组合数学、离散数学和量子物理等广泛的数学计算。它允许用户以完全符号化的方式处理数学表达式&#xff0c;而无需将问题转换为数值近…

大模型的“幻觉”克星!被低估的RAG技术

1 RAG与大模型、Prompt、微调的关系 本文主要带大家深入学习一下最近AI领域的重要技术RAG&#xff0c;本文致力于用大白话给大家说明白RAG&#xff0c;但是还是需要一些大模型和微调有关的领域名词有一些基本的了解&#xff0c;大家选择性阅读哦!在进行正文学习之前我们先用一…

Unity Meta Quest 开发:如何在每只手指上添加 Poke 交互

XR 开发社区&#xff1a; SpatialXR社区&#xff1a;完整课程、项目下载、项目孵化宣发、答疑、投融资、专属圈子 找到玩家物体 OVRCameraRig 下的子物体 HandInteractorsRight/Left&#xff08;分别管理左右手的 Interactor&#xff09;下的 HandPokeInteractor 子物体&#x…