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

目录

问题

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

解决思路

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

解决代码(标注【主要代码】的为重点)

index.vue

html 复制代码
<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

css 复制代码
.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

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 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄8 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询