解决Electron拖拽窗口点击事件失效问题

这个拖拽问题导致点击事件失效问题困惑了我好几个晚上,主要还是因为对前端不熟悉。今天问了ChatGPT它给出了一个解决方案「设置一个透明区域 」。

主要代码就是<div class="drag-area"></div>该标签,该标签占满了整个视口使得整个其都可以拖拽,然后为不可拖拽的元素指定-webkit-app-region: no-drag; 该class 属性。

其实我没有理解这么做为什么可以响应点击事件,因为我尝试过只给 video 标签设置可拖拽,且将 Setting 标签设置为不可拖拽,层级也修改了,但还是无法响应点击事件。

我感觉最重要的应该就是浏览器到底是如何处理透明区域的事件。

html 复制代码
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Setting } from '@icon-park/vue-next'

const router = useRouter()
const route = useRoute()

const toCameraPage = (query) => {
  console.log('toCameraPage...')
  router.push({
    name: 'camera',
    query: {
      ...route.query,
      ...query
    }
  })
}

// 用 ref 引用 video 标签
const video = ref<HTMLVideoElement | null>(null)

const constraints = {
  audio: false,
  video: true
}

onMounted(async () => {
  if (video.value) {
    try {
      const mediaStream = await navigator.mediaDevices.getUserMedia(constraints)
      video.value.srcObject = mediaStream
      video.value.onloadedmetadata = function () {
        video.value?.play()
      }
    } catch (error) {
      console.error('Error accessing media devices.', error)
    }
  }
})
</script>

<template>
  <main class="all">
    <!-- 兼容拖拽 -->
    <div class="drag-area"></div>
    <Setting
      class="setting-icon-wrapper"
      theme="outline"
      size="24"
      fill="#ffffff"
      @click="toCameraPage"
    />
    <video ref="video" class="camera"></video>
  </main>
</template>

<style lang="less" scoped>
.all {
  position: relative;
  /* 确保子元素绝对定位生效 */

  .drag-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vh;
    height: 100vh;
    -webkit-app-region: drag; /* 让整个区域可拖动 */
    z-index: 1;
  }

  .setting-icon-wrapper {
    position: absolute;
    cursor: pointer;
    z-index: 2;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-app-region: no-drag;
  }

  .camera {
    height: 100vh;
    object-fit: cover;
  }
}
</style>
相关推荐
meichaoWen2 分钟前
【CSS】CSS 面试知多少
前端·css
我血条子呢8 分钟前
【预览PDF】前端预览pdf
前端·pdf·状态模式
90后的晨仔22 分钟前
报错 找不到“node”的类型定义文件。 程序包含该文件是因为: 在 compilerOptions 中指定的类型库 "node" 的入口点 。
前端
90后的晨仔38 分钟前
5分钟搭建你的第一个TypeScript项目
前端·typescript
专注前端30年1 小时前
Vue2 中 v-if 与 v-show 深度对比及实战指南
开发语言·前端·vue
90后的晨仔1 小时前
TypeScript是什么?为什么前端必须学它?
前端
用户47949283569151 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在1 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好12 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
麦麦大数据2 小时前
F038 vue+flask 微博舆情热搜情感分析大数据分析系统|前后端分离架构
vue.js·架构·flask·情感分析·微博·舆情分析