鼠标拖拽拖动盒子时，与盒子内某些点击事件冲突问题解决

问题

拖动该悬浮球时，鼠标弹起可能会触发悬浮球内事件

解决思路

• 鼠标拖动盒子时，将 isMove 设为 true 意为正在拖动盒子，此时将 class="btns_move" 遮挡容器展示在悬浮球上层，以覆盖悬浮球，此时也就不存在触发悬浮球点击事件的冲突了；鼠标拖动完盒子弹起时再将 isMove 设为 false 意为不在拖动盒子（遮挡容器 class="btns_move" 不存在），可以触发悬浮球点击事件
• 【注解】click 点击事件主要是在鼠标弹起时触发， class="btns_move" 容器展示时，鼠标已不再悬浮器上点击，所以也就不存在鼠标在悬浮球上弹起的说法，因此可解决拖动盒子时与悬浮球点击事件冲突的问题
  

解决代码（标注【主要代码】的为重点）

index.vue

<div ref="btns" class="btns" @mousedown="mousedownHandler"><div class="btns_other_police" @click="$refs.SearchDialogRef.open('police')"><img :src="require(`@/assets/portrait/iconfont/${theme}_police.png`)" /><span>其他警员</span></div><div class="btns_fullscreen_show" @click="handleScreenFull"><img :src="require(`@/assets/portrait/iconfont/${theme}_expand.png`)" /><span> {{ isFullscreen ? '退出全屏' : '全屏显示' }} </span></div><!-- <div v-show="isMove" class="btns_move">我是避免拖动盒子与盒子内事件冲突的元素</div> --><div v-show="isMove" class="btns_move" />  <!-- 【主要代码】 -->
</div>

index.scss

.btns {$btnWiddth: 70px;position: absolute;bottom: 10px;right: 10px;// z-index: 9999;z-index: 2000;width: $btnWiddth;height: 147px;cursor: move;opacity: 0.8;&_other_police,&_fullscreen_show {width: $btnWiddth;height: $btnWiddth;display: flex;flex-direction: column;align-items: center;justify-content: center;// background-color: red;border-radius: 50px;font-size: 12px;cursor: pointer;img {width: 25px;height: 25px;margin-bottom: 5px;}}&_other_police {margin-bottom: 7px;}&_move {width: 100%;height: 100%;// background-color: red;position: absolute; /* 【主要代码】 */top: 0;// z-index: -10;}
}

mixins/index.js

import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
import portraitMock from '../../../../public/static/portraitMock.json'export const PortraitMixin = {data() {return {lightEchartsNoDataColor: '#000',blueEchartsNoDataColor: '#fff',timeFormat: 'yyyy/MM/dd',timeValueFormat: 'yyyy-MM-dd',portraitMock,initBtnX: 0,initBtnY: 0,isMove: false // 【主要代码】}},computed: {...mapGetters(['isFullscreen'])},mounted() {const _this = thiswindow.addEventListener('resize',() => {// 全屏下监控是否按键了ESCif (_this.checkFull()) {// 全屏下按键esc后要执行的动作screenfull.exit()_this.$store.commit('SET_isFullscreen', false)}},false)document.addEventListener('mouseup', () => {this.isMove = false // 【主要代码】document.removeEventListener('mousemove', this.mousemoveHandler)})},filters: {noDataFilter(val) {return val || val === 0 ? val : '-'},numFilter(val) {return val || val === 0 ? Number(val).toLocaleString() : '-'},bmQlfFilter(val, color, key) {const data = val.filter((item) => item.policeColorCode.includes(color))return data.length ? (data[0][key] || data[0][key] === 0 ? data[0][key] : '-') : '-'}},methods: {// 全屏显示handleScreenFull() {if (!screenfull.isEnabled) {this.$message({message: 'you browser can not work',type: 'warning'})return false}if (this.isFullscreen) {screenfull.exit()this.$store.commit('SET_isFullscreen', false)this.$store.commit('SET_isShowHeader', true)} else {screenfull.request()this.$store.commit('SET_isFullscreen', true)this.$store.commit('SET_isShowHeader', false)}},/*** 是否全屏并按键ESC键的方法*/checkFull() {const isFullscreen =window.fullScreen ||window.isFullscreen ||document.webkitIsFullScreen ||document.msFullscreenEnabledlet isFull = document.fullscreenEnabled && !isFullscreen// to fix : false || undefined == undefinedif (isFull === undefined) {isFull = false}return isFull},toDetailHandler(type) { // 该方法和此处无关if (type === 'zffx') {this.$router.push({path: '/warning-manage-common/warning-query',query: {date: JSON.stringify({kssj: this.zffxSearchTime[0],jssj: this.zffxSearchTime[1]}),...(this.searchXm ? { zrr: this.searchXm } : {}),...(this.searchBm ? { ssbm: this.searchBm } : {})}})}},mousedownHandler($event) {this.initBtnX = $event.pageX - this.$refs.btns.offsetLeftthis.initBtnY = $event.pageY - this.$refs.btns.offsetTopdocument.addEventListener('mousemove', this.mousemoveHandler)},mousemoveHandler($event) {this.isMove = true // 【主要代码】this.$refs.btns.style.left = $event.pageX - this.initBtnX + 'px'this.$refs.btns.style.top = $event.pageY - this.initBtnY + 'px'}}
}

解决效果