Browse Source

解决鼠标拖拽导致鼠标弹起事件失效的bug,同时让鼠标不能选中文本

liuwei 4 years ago
parent
commit
bd77acea6d
2 changed files with 38 additions and 21 deletions
  1. 5 1
      src/index.ejs
  2. 33 20
      src/renderer/components/Button.vue

+ 5 - 1
src/index.ejs

@@ -10,7 +10,11 @@
       </script>
     <% } %>
   </head>
-  <body>
+  <body
+          onselectstart='return false'
+          onselect='return false'
+          oncontextmenu='return false'
+  >
     <div id="app"></div>
       <script>
         if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')

+ 33 - 20
src/renderer/components/Button.vue

@@ -22,6 +22,7 @@
              @click="clickBtn(item)"
              @mousedown="mouseDown(item)"
              @mouseup="mouseUp(item)"
+             @mouseout="mouseOut(item)"
         >
             {{item.Text}}
         </div>
@@ -114,28 +115,40 @@
             // 鼠标松开事件
             async mouseUp(e) {
                 if(e.ButtonType === 0){
-                    this.$refs[e.ID][0].style.backgroundImage = 'url('+`${this.staticUrl}/Data/${e.BackIcon}`+')'
+                    this.mouseUpOrOut(e)
+                }
+            },
+
+            // 鼠标离开(防止鼠标拖动后松开事件失效)
+            async mouseOut(e) {
+                if(e.ButtonType === 0){
+                    this.mouseUpOrOut(e)
+                }
+            },
+
+            // 鼠标松开或离开调用的事件回调函数
+            async mouseUpOrOut(e) {
+                this.$refs[e.ID][0].style.backgroundImage = 'url('+`${this.staticUrl}/Data/${e.BackIcon}`+')'
 
-                    // 分屏和清屏按钮控制
-                    for(const item of e.MouseDownActionList){
-                        // 获取大屏对象
-                        const bigscreenObj = this.$store.state.bigScreenObj
-                        // 获取当前大屏Id
-                        let Id = item.SourceID
-                        if(item.ActionType === 9 && item.Condition === 'SetSplit'){
-                            bigscreenObj[Id].splitStatus = item.Parameter[0]-1
-                            bigscreenObj[Id].bindList = []
-                            for(let i =0;i<(item.Parameter[0])**2;i++){
-                                bigscreenObj[Id].bindList.push(i+1)
-                            }
-                            this.$store.dispatch('updateBigscreenObj',bigscreenObj)
-                        }else if(item.Parameter === '清屏'){
-                            bigscreenObj[Id].signalArr = []
-                            await reqRefreshView({
-                                bigScreenId: Id,
-                                streamWindows:[]
-                            })
+                // 分屏和清屏按钮控制
+                for(const item of e.MouseDownActionList){
+                    // 获取大屏对象
+                    const bigscreenObj = this.$store.state.bigScreenObj
+                    // 获取当前大屏Id
+                    let Id = item.SourceID
+                    if(item.ActionType === 9 && item.Condition === 'SetSplit'){
+                        bigscreenObj[Id].splitStatus = item.Parameter[0]-1
+                        bigscreenObj[Id].bindList = []
+                        for(let i =0;i<(item.Parameter[0])**2;i++){
+                            bigscreenObj[Id].bindList.push(i+1)
                         }
+                        this.$store.dispatch('updateBigscreenObj',bigscreenObj)
+                    }else if(item.Parameter === '清屏'){
+                        bigscreenObj[Id].signalArr = []
+                        await reqRefreshView({
+                            bigScreenId: Id,
+                            streamWindows:[]
+                        })
                     }
                 }
             }