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

目录

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

原因:

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.mzph.cn/bicheng/46794.shtml

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

相关文章

Windows虚拟摄像头有哪些?分享5个方法,手机一键替换电脑摄像头!

Windows虚拟摄像头怎么用&#xff1f;当我们的电脑缺少摄像头时&#xff0c;我们可以借助虚拟摄像头实现。手机作为电脑摄像头的需求日益增长&#xff0c;本文就来给大家详细介绍&#xff0c;关于电脑虚拟摄像头的使用和说明&#xff0c;一起来看看吧&#xff01; &#xff08;…

SVN的使用和下载

SVN&#xff08;Subversion&#xff09;是一个开放源代码的版本控制系统&#xff0c;它用于管理随时间改变的数据&#xff0c;如源代码文件等。这些数据被放置在一个中央资料档案库&#xff08;Repository&#xff09;中&#xff0c;SVN能够跟踪文件的每一次变动&#xff0c;从…

微服务实战系列之玩转Docker(二)

前言 上一篇&#xff0c;博主对Docker的背景、理念和实现路径进行了简单的阐述。作为云原生技术的核心之一&#xff0c;轻量级的容器Docker&#xff0c;受到业界追捧。因为它抛弃了笨重的OS&#xff0c;也不带Data&#xff0c;可以说&#xff0c;能够留下来的都是打仗的“精锐…

Vue3 前置知识

1. Vue3 简介 2020年9月18日&#xff0c;Vue.js发布版3.8版本&#xff0c;代号&#xff1a;one Piece(海贼王)经历了&#xff1a;4800次提交、40个RFC、600次PR、300贡献者官方发版地址&#xff1a;Release v3.0.0 One Piecevuejs/,core截止2023年10月&#xff0c;最新的公开版…

LRU CaChe(内存替换算法)

六、LURCache 0、LUR Cache概念 LRU是Least Recently Used的缩写&#xff0c;意思是最近最少使用&#xff0c;它是一种Cache替换算法。 什么是Cache&#xff1f;狭义的Cache指的是位于CPU和主存间的快速RAM&#xff0c;通常它不像系统主存那样使用DRAM技术&#xff0c;而使用昂…

统计字符串中出现指定字符的次数

题目 声明一个字符串&#xff0c;内容为‘HelloPython,HelloJava,hellophp’&#xff0c;用户从键盘录入要查询的字符&#xff08;不区分大小写&#xff09;&#xff0c;要求统计出要查找的字符在字符串中出现的次数 代码 sHelloPython,HelloJava,hellophp wordinput(请输入…

C++ 入门14:STL 容器之向量(vector)

往期回顾&#xff1a; C 入门11&#xff1a;虚函数和多态-CSDN博客 C 入门12&#xff1a;模板&#xff08;Template&#xff09;-CSDN博客 C 入门13&#xff1a;异常处理-CSDN博客 C 入门14&#xff1a;STL 容器之向量&#xff08;vector&#xff09; 一、前言 在前面文章的…

使用Python进行车牌识别

哈喽,大家好,我是木头左! 1. 车牌识别的重要性 车牌识别是计算机视觉领域的一个重要应用,它可以自动识别车辆的车牌号码。在交通管理、停车场管理、道路监控等领域,车牌识别技术具有广泛的应用前景。本文将介绍如何使用Python进行车牌识别,帮助读者掌握这一技能。 2. 车…

打开磁盘格式为NTFS的磁盘 ntfs磁盘无法打开 移动硬盘出现ntfs怎么打不开了的原因和解决方案

在日常的工作和生活中&#xff0c;移动硬盘作为我们存储和传输数据的重要工具&#xff0c;发挥着不可替代的作用。然而&#xff0c;有时候我们会遇到这样一个问题&#xff1a;移动硬盘突然显示NTFS格式&#xff0c;并且无法正常打开。面对这种情况&#xff0c;我们往往感到束手…

【Android】高端的UI,往往只需要最朴素的控件组成

【Android】高端的UI&#xff0c;往往只需要最朴素的控件组成 Android 作为全球最流行的移动操作系统之一&#xff0c;提供了一套丰富的 UI 控件&#xff0c;使开发者能够构建功能强大、交互性强的应用。本博客系列将探讨 Android UI 控件的功能&#xff0c;介绍最常见的六种控…

实战:Linux下静默安装DM达梦数据库

官方文档参考&#xff1a;安装前准备 | 达梦技术文档 静默安装DM达梦数据库&#xff0c;提前编写好安装脚本、下载好软件、配置好服务器的内核参数信息。 一、安装前的准备 1.操作系统环境检测 #查看服务器操作系统版本和型号 cat /etc/system-release cat /etc/os-releas…

【系统架构设计师】十一、系统架构设计(层次架构风格|MVC|面向服务的架构风格|ESB)

目录 五、层次架构风格 5.1 两层C/S架构 5.2 三层C/S架构 5.3 三层B/S架构 5.4 MVC架构 5.5 MVP架构 5.6 MVVM架构 六、面向服务的架构风格 6.1 SOA特征 6.2 Web Service 6.2.1 关键技术 6.2.2 WEB Service 6.3 企业服务总线ESB 相关推荐 历年真题练习 五、层次…

【MAUI】生命周期

.NET Multi-platform App UI (.NET MAUI) 应用通常有四种执行状态&#xff1a;“未运行”、“运行中”、“已停用”和“已停止”。 当应用从未运行状态转换为运行状态、从运行状态转换为已停用状态、从已停用状态转换为已停止状态、从已停止状态转换为运行状态&#xff0c;以及…

Java并发编程之如何正确的停止线程

在Java线程状态转换中&#xff0c;我们知道&#xff0c;线程最终的命运是Terminated&#xff0c;当然&#xff0c;也有永不停止一直干活的线程&#xff08;除非断电&#xff09;。线程的停止&#xff0c;正常来说是线程运行到结束&#xff0c;但也有程序出错或是用户关闭程序等…

new mars3d.graphic.FixedRoute({的position长度超过一百条浏览器会卡死的解决方案

问题场景描述&#xff1a; FixedRoute的position数据已经很精细时&#xff0c;会导致卡死的问题 解决方案&#xff1a; 1. 数据已经很精细时&#xff0c;可以不用autoSurfaceHeight来计算&#xff0c;如果非要用&#xff0c;可以加个minDistance: 200参数。 fixedRoute.auto…

ChatGPT 深度解析:技术驱动的智能对话

在当今科技飞速发展的时代&#xff0c;ChatGPT 无疑成为了最耀眼的明星之一。它以其令人惊叹的智能对话能力&#xff0c;引发了全球范围内的广泛关注和热议。 ChatGPT 背后的技术堪称精妙绝伦。它基于深度学习算法&#xff0c;通过对海量数据的学习和分析&#xff0c;从而能够理…

BasicSR项目(通用图像超分、修复、增强工具库)介绍

项目地址&#xff1a;https://github.com/XPixelGroup/BasicSR 文档地址&#xff1a;https://github.com/XPixelGroup/BasicSR-docs/releases BasicSR 是一个开源项目&#xff0c;旨在提供一个方便易用的图像、视频的超分、复原、增强的工具箱。BasicSR 代码库从2018年4月20日…

【Memcached】Memcached的工作原理

目录 ​编辑 第2章&#xff1a;Memcached工作原理 2.1 数据存储与访问 2.2 分布式架构 2.3 数据过期机制 第2章&#xff1a;Memcached工作原理 2.1 数据存储与访问 Memcached是一种键值存储系统&#xff0c;其中数据以键值对的形式存储。键是用于定位数据的唯一标识符&am…

MySQL架构详解

MySQL是一个广泛使用的开源关系数据库管理系统&#xff0c;以其可靠性、性能和易用性而闻名。了解MySQL的架构对于优化数据库性能、设计高效的数据库系统以及进行有效的数据库管理至关重要。本文将详细介绍MySQL的架构&#xff0c;包括其主要组件和功能。 1. 连接器&#xff0…

libyaml库的交叉编译

目录 1.Ubuntu环境中安装libyaml库 2.交叉编译 3.success 1.Ubuntu环境中安装libyaml库 官方地址&#xff1a;https://pyyaml.org/wiki/LibYAML 下载路径&#xff1a;http://pyyaml.org/download/libyaml/yaml-0.2.5.tar.gz 2.交叉编译 官方的下载路径为/usr/local下&am…