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

目录

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

原因:

[touch-action 介绍:](#touch-action 介绍:)

解决方案:

1.手动设置touch-action:

2.使用条件渲染:

3.CSS样式隔离:

4.浏览器兼容性:

[5. 忽略警告](#5. 忽略警告)


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

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

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

原因:

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

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

touch-action 介绍:

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

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

css 复制代码
#map {
  touch-action: none;
}

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

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

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

css 复制代码
html {
  touch-action: manipulation;
}

解决方案:

1.手动设置touch-action:

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

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

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

2.使用条件渲染

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

javascript 复制代码
:style="`touch-action:${setTouch?'auto':'none'} ;`"

3.CSS样式隔离:

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

css 复制代码
<style scoped>

4.浏览器兼容性

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

5. 忽略警告

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

结束啦!

相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程7 小时前
2025前端面试题
前端·面试
前端小趴菜058 小时前
React - createPortal
前端·vue.js·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo9 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼11 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原11 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf11 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js