标签:document inpu this cti als 鼠标 移动 doc 功能
改写过程是需留意之处:
1,点击按钮后,需注销掉所有可能存在的冒泡至document上的各类事件(click, mousedown,mouseup)以及 2 个按钮上的mousedown和mouseup事件
2,因为需要直接操作dom元素,所以给元素设置了ref,或许应该使用指令来重构此应用。有时间再说吧。
app.vue 代码如下:
<template> <div id="app"> <input type="button" :value="val1" @click.stop="handleInputOne" ref="inputOne"/> <input type="button" :value="val2" @click.stop="handleInputTwo" ref="inputTwo"/> <p>{{val3}}</p> <div class="myDiv" :class="{active1:isActive1,active2:isActive2}" ref="myDiv"></div> </div> </template> <script> export default { data(){ return{ val1:‘根据鼠标点击位置移动‘, val2:‘根据鼠标轨迹移动‘, val3:‘请点击按钮激活功能‘, pos:[], isActive1:true, isActive2:false, } }, methods:{ handleInputOne(e){ var _this = this; this.val1 = ‘根据鼠标点击位置移动‘; this.val2 = ‘根据鼠标轨迹移动‘; this.val1 += ‘(已激活)‘; this.val3 = "鼠标点击页面, 人物将移动至鼠标位置!"; (e||window.event).cancelBubble = true; this.clearEvent(); document.onclick=function(e){ var myDiv = _this.$refs.myDiv; _this.isActive1=false; _this.isActive2=true; _this.startMove(myDiv,{x:e.clientX,y:e.clientY}, function(){_this.isActive1=true;_this.isActive2=false;}); return false; } }, handleInputTwo(e){ var _this = this; this.val2 = ‘根据鼠标轨迹移动‘; this.val1 = ‘根据鼠标点击位置移动‘; this.val2 += ‘(已激活)‘; this.val3 = ‘按住鼠标左键,在页面划动,人物将按照鼠标轨迹移动。‘; var myDiv = _this.$refs.myDiv; this.pos = [{x:myDiv.offsetLeft, y: myDiv.offsetTop}]; (e || window.event).cancelBubble = true; this.clearEvent(); document.onmousedown = function(e){ _this.pos.push({x:e.clientX, y:e.clientY}); document.onmousemove = function(e){ _this.pos.push({x:e.clientX,y:e.clientY}); return false; } return false; } document.onmouseup =function(){ document.onmousemove = null; _this.isActive1=false; _this.isActive2=true; var timer = setInterval(function(){ if(_this.pos.length == 0){ clearInterval(timer); _this.isActive1 = true; _this.isActive2 = false; return; } myDiv.style.left = _this.pos[0].x + ‘px‘; myDiv.style.top = _this.pos[0].y + ‘px‘; _this.pos.shift(); },30) ; } }, clearEvent(){ document.onclick = null; document.onmousedown = null; document.onmousemove = null; document.onmouseup = null; var inputOne = this.$refs.inputOne; var inputTwo = this.$refs.inputTwo; inputOne.onmousedown = inputOne.onmouseup = inputTwo.onmousedown = inputTwo.onmouseup=function(e){ (e||window.event).cancelBubble = true; } }, startMove(obj,target,callback){ var _this = this; clearInterval(obj.timer); obj.timer=setInterval(function(){ _this.doMove(obj,target,callback); },30) }, doMove(obj,target,callback){ var iX=(target.x - obj.offsetLeft) / 5; var iY=(target.y - obj.offsetTop) / 5; iX = iX > 0 ? Math.ceil(iX) : Math.floor(iX); iY = iY > 0 ? Math.ceil(iY) : Math.floor(iY); if(target.x == obj.offsetLeft && target.y==obj.offsetTop){ clearInterval(obj.timer); callback && callback(); }else{ obj.style.left = obj.offsetLeft + iX + ‘px‘; obj.style.top = obj.offsetTop + iY + ‘px‘; } } }, } </script> <style> body,div{ margin: 0; padding: 0; } #app{ position: relative; } .myDiv{ position: absolute; width: 66px; height: 45px; top:100px; left: 50px; } .active1{ background: url(./assets/lesson7/1.gif) no-repeat; } .active2{ background: url(./assets/lesson7/2.gif) no-repeat; } p,input{ margin: 10px; } </style>
标签:document inpu this cti als 鼠标 移动 doc 功能
原文地址:https://www.cnblogs.com/sx00xs/p/12859831.html