关于原生JS元素怎么取消事件,有3种方式

常规方法: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>

其他方法:通过function里面的判断状态,然后return false

案例:

var state=1;

document.getElementById("myBtn").addEventListener("click", function(){

if(state==0){

return false

}else{

alert(“caca”);

state=0;

}

   });

其他方法:通过function里面再次添加此事件,覆盖事件后,然后再return false

案例:

var state=1;

document.getElementById("myBtn").addEventListener("click",
function(){

if(state==0){

document.getElementById("myBtn") .addEventListener("tap",
function() {return false;});

}else{

alert(“caca”);

state=0;

}

   });

原生JS元素怎么取消事件的更多相关文章

  1. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  2. 原生js绑定和解绑事件,兼容IE,FF,chrome

    主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解 ...

  3. 原生js移动端滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  4. JS错误记录 - 取消事件冒泡、按钮、回车、ctrl回车提交留言

    window.onload = function () { var oDiv = document.getElementById('div1'); var oBtn = document.getEle ...

  5. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  6. 通过原生JS实现为元素添加事件

    自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var b ...

  7. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  8. JavaScript之事件委托(附原生js和jQuery代码)

    事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...

  9. onload事件与ready事件的区别,原生js与jquery的区别

    onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...

随机推荐

  1. thinkphp中find()和select()的区别

    1.find()是查找符合条件的第一条数据,返回的是一个一维数组: select()是查找符合条件的所有的数据,返回的是一个二维数组: 2.以下案例 $tech=M('techlevel','HR_C ...

  2. none 和 host 网络的适用场景 - 每天5分钟玩转 Docker 容器技术(31)

    本章开始讨论 Docker 网络. 我们会首先学习 Docker 提供的几种原生网络,以及如何创建自定义网络.然后探讨容器之间如何通信,以及容器与外界如何交互. Docker 网络从覆盖范围可分为单个 ...

  3. Java注解--实现简单读取excel

    实现工具类 利用注解实现简单的excel数据读取,利用注解对类的属性和excel中的表头映射,使用Apache的poi就不用在业务代码中涉及row,rows这些属性了. 定义注解: @Retentio ...

  4. javascript之ProtoBuf在websocket中的使用

    因为ProtoBuf的序列化效率和大小都非常好,所以它在网络通信上面应用越来越多:而webosocket也随着web3.0应用越来越广泛,而将这两个结合在一起的也会慢慢形成一种趋势:本人是为了测试自已 ...

  5. [LeetCode] Friend Circles 朋友圈

    There are N students in a class. Some of them are friends, while some are not. Their friendship is t ...

  6. 1.如何安装maven

    [确认]在CMD命令行中输入echo %JAVA_HOME%,查看JAVA_HOME是否配置.在CMD命令行中输入java -v,查看jdk是否正确安装.   [下载]从http://maven.ap ...

  7. 短信发送接口被恶意访问的网络攻击事件(四)完结篇--搭建WAF清理战场

    前言 短信发送接口被恶意访问的网络攻击事件(一)紧张的遭遇战险胜 短信发送接口被恶意访问的网络攻击事件(二)肉搏战-阻止恶意请求 短信发送接口被恶意访问的网络攻击事件(三)定位恶意IP的日志分析脚本 ...

  8. Android远程桌面助手

    很早之前,做过一个<WinCE远程桌面助手>,在没有屏幕或者在调试LCD驱动时,发挥了很大作用,平日开发也是必备.后来还被网友用于处理一些疑难问题,如无法输入开机密码时可通过该工具远程输入 ...

  9. RADIUS and IPv6[frc-3162译文]

    如今项目中需要涉及到RADIUS及IPv6的使用,而网络中的资料相对较少,现对frc-3162进行中文翻译,分享出来. 由于英语水平有限,翻译不恰当的地方,还请提出,便于在下及时修改. 原文链接 这份 ...

  10. 极致精简的webservice例子

    看了网上好多关于webservice的例子,基本上对初学者来说都是模棱两可云里雾里,现在,我将网上关于webservice的讲解提炼出来,通过一个最简单使用并且方便的例子,告诉大家什么是webserv ...