vue.js怎样移除绑定的点击事件

JavaScript018

vue.js怎样移除绑定的点击事件,第1张

vue.js移除绑定的点击事件的方法：可以用 v-on 指令监听 DOM 事件：<div id="example"> <button v-on:click="greet">Greet</button></div>绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法：var vm = new Vue({ el: '#example', data: {name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: {greet: function (event) { // 方法内 `this` 指向 vm alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 alert(event.target.tagName)} }})// 也可以在 JavaScript 代码中调用方法vm.greet() // ->'Hello Vue.js!'

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

}