关于原生JS元素怎么取消事件,有3种方式
方法1:removeEventListener
案例:
<body>
<div id="myDIV"> div 元素添加了 onmousemove 事件句柄,在你移动鼠标时会显示随机数。
<p>点击按钮移除 DIV 的事件句柄。</p>
<button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction()
{
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler()
{
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>
</body>
原生JS里面的方法很少,所以换一种思路,在方法里面进行判断
方法2:通过function里面的判断状态,然后return false
案例:
var state=1;
document.getElementById("myBtn").addEventListener("click", function(){
if(state==0){
return false
}else{
alert(“caca”);
state=0;
}
});
方法3:通过function的判断状态,然后在方法里面再次添加此事件,覆盖事件后,然后再return false
案例:
var state=1;
document.getElementById("myBtn").addEventListener("click", function(){
if(state==0){
document.getElementById("myBtn") .addEventListener("click", function() {return false;});
}else{
alert(“caca”);
state=0;
}
});