解决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>
相关推荐
excel6 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常6 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip6 小时前
JavaScript事件流
前端·javascript
小菜全6 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C6 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG7 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904277 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路7 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa7 小时前
HTML和CSS学习
前端·css·学习·html
秋秋小事7 小时前
React Hooks useContext
前端·javascript·react.js