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

问题

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

解决思路

• 鼠标拖动盒子时，将 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>
1
2
3
4
5
6
7
8
9
10
11
12

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;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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'
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

解决效果