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

我也有在努力2024-11-19 13:20

这个拖拽问题导致点击事件失效问题困惑了我好几个晚上，主要还是因为对前端不熟悉。今天问了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>