您的位置:首页 > Web前端 > JavaScript

原生JS元素怎么取消事件

2017-08-04 15:44 204 查看
关于原生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;

}

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: