Resolvió el problema de conflicto con ciertos eventos de clic en el cuadro al arrastrar el cuadro con el mouse.

pregunta

Al arrastrar la bola flotante, el rebote del mouse puede desencadenar eventos en la bola flotante.

Soluciones

• Cuando el mouse arrastra el cuadro, isMoveestablecer en truesignifica que el cuadro se está arrastrando. En este momento, class="btns_move"el contenedor de oclusión se muestra en la capa superior de la bola flotante para cubrir la bola flotante. En este momento, no hay ningún conflicto que desencadene el evento de clic de bola flotante; el mouse arrastra Después de que aparezca el cuadro, isMoveconfigurarlo falseen significa que el cuadro ya no se arrastra (el contenedor de bloqueo class="btns_move"no existe) y se puede activar el evento de clic de bola flotante.
• [Nota] clickEl evento de clic se activa principalmente cuando el mouse rebota hacia arriba . class="btns_move"Cuando se muestra el contenedor, ya no se hace clic con el mouse en la bola flotante , por lo que no existe el rebote del mouse sobre la bola flotante. Por lo tanto, Puede resolver el problema al arrastrar el cuadro. El problema del conflicto entre eventos de clic de bola flotante.
  

Código de solución (énfasis en el marcado [código principal])

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 = this
    window.addEventListener(
      'resize',
      () => {
    
    
        // 全屏下监控是否按键了ESC
        if (_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.msFullscreenEnabled
      let isFull = document.fullscreenEnabled && !isFullscreen
      // to fix : false || undefined == undefined
      if (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.offsetLeft
      this.initBtnY = $event.pageY - this.$refs.btns.offsetTop
      document.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'
    }
  }
}

解决效果