这个拖拽问题导致点击事件失效问题困惑了我好几个晚上，主要还是因为对前端不熟悉。今天问了ChatGPT它给出了一个解决方案「设置一个透明区域」。
主要代码就是<div class="drag-area"></div>该标签，该标签占满了整个视口使得整个其都可以拖拽，然后为不可拖拽的元素指定-webkit-app-region: no-drag; 该class 属性。
其实我没有理解这么做为什么可以响应点击事件，因为我尝试过只给 video 标签设置可拖拽，且将 Setting 标签设置为不可拖拽，层级也修改了，但还是无法响应点击事件。
我感觉最重要的应该就是浏览器到底是如何处理透明区域的事件。
<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 = mediaStreamvideo.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><Settingclass="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>
