关于js中事件重复绑定的问题

JavaScript018

关于js中事件重复绑定的问题,第1张

在写一个项目，有一个触发编辑按钮才会出现编辑板块，然后编辑板块中有点击添加的事件。当保存编辑，编辑板块消失。再次点击编辑，再点击添加，会触发多次，生成多个模块。

经过多次反复痛苦的调试，发现是在点击编辑后调用的函数中绑定了添加的事件，当再次点击编辑时，会重复绑定，所以会出现触发多次的bug。

解决方法就是在绑定之前先解绑。

这样就可以解决了。jquery中还有很多类似的处理，比如说运行一个动画前先将之前的动画stop()掉。

不过在解绑事件时最好将具体的元素写入,因为在事件委托时，不写明具体，解绑会将所有事件解绑

上述例子只会触发alert（3），因为点击btn1时，解绑了所有在body上的click事件，只会调用在最后绑定的alert（3）。

应该写成

//防止点击存储，先解绑点击事件，在绑定点击事件

$('.editApprover').unbind("click").bind("click", function()

function PhoneDrag(id) {

    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")

}