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