uni-app 微信小程序movable-area遮盖 遮挡住 点击事件

news/2024/7/20 0:46:46 标签: uni-app, 微信小程序, 小程序

问题描述:

使用了movable-area拖拽在页面有点击事件的地方会覆盖住点击事件

直接上代码:


<movable-area class="movable-area">
	<movable-view class="movable-view" :x="x" :y="y" direction="all">
		<text>去接课</text>
	</movable-view>
</movable-area>

data() {
	return {
			x: 320,
			y: 520,
	}
},
		
.movable-area{
  position:fixed;
  top:0;
  left:0;
  width:750rpx;
  height:100%;
 // 让一个元素忽略鼠标操作
  pointer-events: none;
}
.movable-view{
  color:#F00;
  position:relative;
  // 还原浏览器设定的默认行为 
  pointer-events: auto;
  width:auto;
  height:auto;
  display:inline-block;
}

不懂的朋友百度下css的pointer-events属性。


http://www.niftyadmin.cn/n/5028689.html

相关文章

213 - Message Decoding (UVA)

题目链接如下&#xff1a; Online Judge 这题挺烦的&#xff0c;我题目看了好几遍才看懂……信息解码(Message Decoding)ACM/ICPC World Finals 1991,UVa 213_一封信笺等一前缘的博客-CSDN博客 上面这篇用的是刘汝佳的解法&#xff0c;他里面保存header的方式特别好&#xf…

Marmof:AI写作助手文章内容生成器工具

【产品介绍】 名称 Marmof 具体描述 Marmof是一个AI驱动的写作平台&#xff0c;可以帮助你快速创建原创、无抄袭的网站、邮件、广告和博客内容。每月提供5000字的免费额度&#xff0c;永久有效。拥有超过49种强大的工具&#xff0c;可以为各种平台生成吸引人的内容…

【云计算】虚拟私有云 VPC

虚拟私有云 VPC 1.前言1.1 基本介绍1.2 VPC 的作用1.3 VPC 的适用人群 2.VPC 基本概念2.1 VPC 相关基本概念2.2 其他相关基本概念 3.VPC 通信场景3.1 VPC 内部互通3.2 VPC 间互通3.2.1 对等连接3.2.2 Transit Gateway 或者云联网 3.3 访问 Internet3.3.1 Internet 网关3.3.2 NA…

Vue.js的服务器端渲染(SSR):为什么和如何

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

PYQT制作动态时钟

所有代码&#xff1a; import sys from PyQt5.QtCore import Qt, QTimer, QRect from PyQt5.QtGui import QPixmap, QTransform, QPainter, QImage from PyQt5.QtWidgets import QApplication, QLabel from PyQt5 import uic import newdef adder():global iglobal angle_s, a…

Matlab图像处理-HSV

HSV HSV(色调、饱和度、数值)是人们从颜色轮或调色板中挑选颜色(即颜料或油墨)时所用的几种彩色系统之一。这种彩色系统与RGB系统相比&#xff0c;更加接近于人们的经验和描述彩色感觉时所用的方式。在艺术领域&#xff0c;色调、饱和度和数值分别称为色泽、明暗和调色。 HSV…

【Git】万字git与gitHub

&#x1f384;欢迎来到边境矢梦的csdn博文&#x1f384; &#x1f384;本文主要梳理在git和GitHub时的笔记与感言 &#x1f384; &#x1f308;我是边境矢梦&#xff0c;一个正在为秋招和算法竞赛做准备的学生&#x1f308; &#x1f386;喜欢的朋友可以关注一下&#x1faf0;&…

【DevOps核心理念基础】3. 敏捷开发最佳实践

一、敏捷开发最佳实践 1.1 项目管理 1.2 需求管理 1.3 技术架构 1.4 技术开发 1.5 测试 二、敏捷开发最佳实践 2.1 敏捷开发的执行细节 三、全面的DevOps工具链 四、版本控制和协作开发工具 4.1 集中式版本控制工具 4.2 分布式版本控制工具 一、敏捷开发最佳实践 …