解决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>
相关推荐
天蓝色的鱼鱼4 分钟前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin9 分钟前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗12 分钟前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀69626 分钟前
CSS-响应式布局
前端
三小河30 分钟前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法34 分钟前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku35 分钟前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀69639 分钟前
2025-35st-w-日常开发总结
前端
我是日安41 分钟前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
小lan猫1 小时前
React学习笔记(一)
前端·react.js