Javascript从外部函数中删除Binded EventListener

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (8)

我试图从设置监听器的单独函数中删除带有绑定变量的事件监听器。

此问题/答案描述了如何从同一函数中删除绑定的侦听器

https://stackoverflow.com/questions/46455624/javascript-addeventlistener-removeeventlistener-and-bind

这就是我想要做的

function testBind(var1,var2){
//remove the bound event from within this function <<<
alert('bound event now removed');
}

function setEvent(){
var addEvent =  document.getElementById("testBtn");   
var boundYes = yesFunction.bind( this, this );
addEvent.addEventListener('mouseup', boundYes);
}

我能找到的所有示例都在set事件函数中删除了事件侦听器

addEvent.removeEventListener("mouseup", boundYes ); 

我知道使用bind每次都会创建一个新的事件监听器,并删除你需要设置的监听器,并通过相同的变量将其删除。

如何从testBind函数中正确删除事件侦听器?

谢谢

提问于
用户回答回答于

如果(由于代码中的约束)这个首选解决方案是不可能的,另一个选择是通过自定义属性将处理程序与元素相关联:

addEvent.boundYes = boundYes; /* Assign boundYes function to element */

这将为您提供在以下'mouseup'期间取消注册事件时通过DOM元素本身访问此函数处理程序实例的方法testBind()

function yesFunction() {
  console.log('yesFunction');
}

function testBind(var1, var2) {

  const addEvent = document.getElementById("testBtn");
  const boundYes = addEvent.boundYes;

  /* Check to see if boundYes associated with element */
  if (boundYes) {

    /* Remove the event listener from element */
    addEvent.removeEventListener('mouseup', boundYes);

    /* Disaccoaite the function from element */
    addEvent.boundYes = undefined;
    alert('bound event now removed');
  }
}

function setEvent() {
  var addEvent = document.getElementById("testBtn");
  
  /* Prevent multiple boundYes handlers */
  if (!addEvent.boundYes) {

    var boundYes = yesFunction.bind(this, this);
    addEvent.addEventListener('mouseup', boundYes);

    /* Attach boundYes function to element */
    addEvent.boundYes = boundYes;
  }
}


setEvent();

testBind();

<button id="testBtn">testBtn</button>

热门问答

云服务器中ping不可达,请教一下如何恢复?

推荐已采纳
本地主机 ping 不通实例可能由以下问题导致: 目标服务器的设置不正确 域名没有正确解析 链路故障 在确保本地网络正常的前提下(即您可以正常 ping 通其他网站),可根据以下操作进行排查: 检查实例是否配置公网 IP 检查安全组设置 检查系统设置 检查域名是否备案 检查域名解...... 展开详请

为什么加固之后生成四个文件?

腾讯云@移动安全

腾讯 · 移动开发工程师 (已认证)

腾讯云移动安全前端开发
推荐

选择最后一个_legu_aligned_signed.apk 文件,这个是加固并已重签名的文件。

COS Javascript SDK 为何没有 getService 方法?

因为 getService 请求的是 service.cos.myqcloud.com 或 cos.<Region>.myqcloud.com 域名,前端直接请求会导致跨域问题。 前端 js sdk 直接请求 bucket/object 相关的接口,虽然也会跨域,但你可以在 你...... 展开详请

iot设备通过mqtt协议连接,没有办法设置clientid?

DylanRichard

腾讯 · 产品经理 (已认证)

万物互联的时代,欢迎来到IoT的世界
推荐

物联网接入层有设备互踢的逻辑,如果是用同一个设备 ID 在不同地方登录,会导致其中一方被另一方踢下线。因此发现设备一直上下线时,需要确认是否有不同的人或者多线程在使用同一个设备 ID 执行登录操作。

实时语音识别支持c#平台吗?

支持的。虽然SDK没有C#的,但是可以通过API进行请求

如何延长签名有效期?

yinshawnrao

腾讯 · Web开发工程师 (已认证)

腾讯云搬砖工
推荐

如果需要自己生成签名,可以使用对象存储COS的SDK工具,里面有提供方法,获取下载链接,签名时间可以参数控制。

https://cloud.tencent.com/document/product/436/7753

所属标签

扫码关注云+社区

领取腾讯云代金券