改写过程是需留意之处：
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>