如何取消侦听器中的自定义 javascript 事件?

德米特里·涅夫佐罗夫

如果通过CustomEvent调度创建的自定义事件,在侦听器中取消它以防止事件的主要目的的方法是什么?

例如,用户点击了一个覆盖层,然后它会发出一个事件,但必须由一些代码来决定是隐藏覆盖层还是保持不变。

更新这是一个知识共享问题,我知道答案,但尝试将其传授给其他人。

德米特里·涅夫佐罗夫

我们需要将事件配置为 cancellable

// create an event
let awesomeEvent = new CustomEvent('some_awesome_event', {
    cancelable: true
})
// emit
let isAllowed = window.dispatchEvent(awesomeEvent)

preventDefault在任何事件侦听器中调用以取消它。

window.addEventListener('some_awesome_event', event => {
    event.preventDefault()
})

然后可以检查事件是否被取消,返回结果为 dispatchEvent

let isAllowed = window.dispatchEvent(awesomeEvent)
if(isAllowed){
    // do some default things
}
else {
    // just an example
    console.log('Oops! The event was cancelled, nothing to do...')
}

事件创建和触发的MDN 指南

防止默认文档

可取消的接口文档

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

清理自定义元素中的事件侦听器

来自分类Dev

具有回调参数的Javascript自定义函数要在具有不同参数的事件侦听器中执行吗?

来自分类Dev

如何简化 javascript 事件侦听器?

来自分类Dev

如何在 JavaScript 中停用 beforeunload 事件侦听器

来自分类Dev

如何在Polymer中的自定义元素属性中添加事件侦听器?

来自分类Dev

如何为页面脚本中的自定义消息创建事件侦听器

来自分类Dev

如何在d3.js中自定义事件侦听器?

来自分类Dev

如何为页面脚本中的自定义消息创建事件侦听器

来自分类Dev

如何在d3.js中自定义事件侦听器?

来自分类Dev

Javascript事件侦听器

来自分类Dev

科尔多瓦Android:如何侦听Javascript中的自定义事件?

来自分类Dev

科尔多瓦Android:如何侦听Javascript中的自定义事件?

来自分类Dev

TypeScript自定义事件侦听器

来自分类Dev

在自定义事件侦听器中注销用户

来自分类Dev

jQuery自定义事件侦听器

来自分类Dev

VBA自定义事件的多个侦听器

来自分类Dev

自定义元素:何时设置事件侦听器

来自分类Dev

如何将参数传递给自定义事件侦听器并防止reactjs中的默认设置?

来自分类Dev

在JavaScript中带多个事件侦听器的for语句外的未定义变量

来自分类Dev

Javascript类,在事件侦听器中未定义var

来自分类Dev

如何使 JavaScript 事件侦听器减少重复?

来自分类Dev

使用.on()事件的变量,自定义jQuery插件中的侦听器不会触发

来自分类Dev

自定义事件侦听器中的柯里化(部分函数)

来自分类Dev

在Javascript中向对象添加事件侦听器

来自分类Dev

删除for循环javascript中的事件侦听器

来自分类Dev

JavaScript事件侦听器测验

来自分类Dev

Javascript事件侦听器和数组

来自分类Dev

Javascript删除“焦点”事件侦听器

来自分类Dev

javascript DOMContentLoaded事件侦听器

Related 相关文章

  1. 1

    清理自定义元素中的事件侦听器

  2. 2

    具有回调参数的Javascript自定义函数要在具有不同参数的事件侦听器中执行吗?

  3. 3

    如何简化 javascript 事件侦听器?

  4. 4

    如何在 JavaScript 中停用 beforeunload 事件侦听器

  5. 5

    如何在Polymer中的自定义元素属性中添加事件侦听器?

  6. 6

    如何为页面脚本中的自定义消息创建事件侦听器

  7. 7

    如何在d3.js中自定义事件侦听器?

  8. 8

    如何为页面脚本中的自定义消息创建事件侦听器

  9. 9

    如何在d3.js中自定义事件侦听器?

  10. 10

    Javascript事件侦听器

  11. 11

    科尔多瓦Android:如何侦听Javascript中的自定义事件?

  12. 12

    科尔多瓦Android:如何侦听Javascript中的自定义事件?

  13. 13

    TypeScript自定义事件侦听器

  14. 14

    在自定义事件侦听器中注销用户

  15. 15

    jQuery自定义事件侦听器

  16. 16

    VBA自定义事件的多个侦听器

  17. 17

    自定义元素:何时设置事件侦听器

  18. 18

    如何将参数传递给自定义事件侦听器并防止reactjs中的默认设置?

  19. 19

    在JavaScript中带多个事件侦听器的for语句外的未定义变量

  20. 20

    Javascript类,在事件侦听器中未定义var

  21. 21

    如何使 JavaScript 事件侦听器减少重复?

  22. 22

    使用.on()事件的变量,自定义jQuery插件中的侦听器不会触发

  23. 23

    自定义事件侦听器中的柯里化(部分函数)

  24. 24

    在Javascript中向对象添加事件侦听器

  25. 25

    删除for循环javascript中的事件侦听器

  26. 26

    JavaScript事件侦听器测验

  27. 27

    Javascript事件侦听器和数组

  28. 28

    Javascript删除“焦点”事件侦听器

  29. 29

    javascript DOMContentLoaded事件侦听器

热门标签

归档