var _this = this
this.oDiv = document.getElementById(id)
this.disX = 0
this.disY = 0
this.oDiv.addEventListener("touchstart", function (ev) {
_this.fnDown(ev)
}, false)
}
PhoneDrag.prototype.fnDown = function (ev) {
var _this = this
var oEvent = ev.touches[0]
ev.preventDefault()
this.disX = oEvent.clientX - this.oDiv.offsetLeft
this.disY = oEvent.clientY - this.oDiv.offsetTop
// 解除事件绑定的时候需要用到
var touchmoveHandle = function (ev) {
_this.fnMove(ev)
}
document.addEventListener("touchmove", touchmoveHandle, false)
document.addEventListener("touchend", function (ev) {
//这里是手指抬起的时候 如何删除touchmove事件
document.removeEventListerner('touchmove', touchmoveHandle, false)
}, false)
}
PhoneDrag.prototype.fnMove = function (ev) {
var oEvent = ev.touches[0]
var iX = oEvent.clientX - this.disX
var iY = oEvent.clientY - this.disY
this.oDiv.style.top = iY + "px"
this.oDiv.style.left = iX + "px"
}
window.onload = function () {
new PhoneDrag("div1")
}
在写一个项目，有一个触发编辑按钮才会出现编辑板块，然后编辑板块中有点击添加的事件。当保存编辑，编辑板块消失。再次点击编辑，再点击添加，会触发多次，生成多个模块。
经过多次反复痛苦的调试，发现是在点击编辑后调用的函数中绑定了添加的事件，当再次点击编辑时，会重复绑定，所以会出现触发多次的bug。
解决方法就是在绑定之前先解绑。
这样就可以解决了。jquery中还有很多类似的处理，比如说运行一个动画前先将之前的动画stop()掉。
不过在解绑事件时最好将具体的元素写入,因为在事件委托时，不写明具体，解绑会将所有事件解绑
上述例子只会触发alert（3），因为点击btn1时，解绑了所有在body上的click事件，只会调用在最后绑定的alert（3）。
应该写成
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最有这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>摇一摇</title>
</head>
<script>
document.addEventListener("mousedown", mouse, false)//点击鼠标时触发事件
document.addEventListener("keydown", key, false)//按下键盘按键时触发事件
function mouse(){
alert('ddd')
}
function key(){
document.removeEventListener("mousedown", mouse, false)
alert('xxx')
}
</script>
<body>
</body>
</html>
