首页 > 软件开发 > HTML >

阻止事件捕获的方法

来源:互联网 2023-03-16 19:15:52 228

阻止事件捕获的方法。捕获事件是javascript里面一个很常见的方法,然后阻止事件捕获则是另外的方法了,这里教大家如何阻止捕获并且阻止事件的冒泡。A2z办公区 - 实用经验教程分享!

阻止事件捕获的方法A2z办公区 - 实用经验教程分享!

工具/原料

  • sublime text 3 编辑器
  • Chrome浏览器

方法/步骤

  • 1

    打开sublime text 3 编辑器,新建一个html文档。A2z办公区 - 实用经验教程分享!

    设定一下HTML的基本架构。A2z办公区 - 实用经验教程分享!

    阻止事件捕获的方法A2z办公区 - 实用经验教程分享!

  • 2

    button id="button">点击一下/button>A2z办公区 - 实用经验教程分享!

    创建一个按钮,用于捕获事件。A2z办公区 - 实用经验教程分享!

    阻止事件捕获的方法A2z办公区 - 实用经验教程分享!

    阻止事件捕获的方法A2z办公区 - 实用经验教程分享!

  • 3

    script src="index.js">/script>A2z办公区 - 实用经验教程分享!

    创建一个js文档,并且与HTML文档进行关联。A2z办公区 - 实用经验教程分享!

    阻止事件捕获的方法A2z办公区 - 实用经验教程分享!

  • 4

    var button = document.getElementById("button");A2z办公区 - 实用经验教程分享!

    button.addEventListener("click", function(){A2z办公区 - 实用经验教程分享!

    alert( "你点我了" );A2z办公区 - 实用经验教程分享!

    });A2z办公区 - 实用经验教程分享!

    这里设置一个变量,然后加上事件的获取,点击一下,就会有弹窗。A2z办公区 - 实用经验教程分享!

    阻止事件捕获的方法A2z办公区 - 实用经验教程分享!

    阻止事件捕获的方法A2z办公区 - 实用经验教程分享!

    阻止事件捕获的方法A2z办公区 - 实用经验教程分享!

  • 4本页面未经许可获取自百度经验
  • 5

    button.addEventListener("click", function(event){A2z办公区 - 实用经验教程分享!

    alert( "你点我了" );A2z办公区 - 实用经验教程分享!

    event.stopImmediatePropagation();A2z办公区 - 实用经验教程分享!

    }, True);A2z办公区 - 实用经验教程分享!

    这里用stopImmediatePropagation可以阻止事件捕获,而且不会冒泡。A2z办公区 - 实用经验教程分享!

    阻止事件捕获的方法A2z办公区 - 实用经验教程分享!

    阻止事件捕获的方法A2z办公区 - 实用经验教程分享!

  • 6

    button.addEventListener("click", function(e){A2z办公区 - 实用经验教程分享!

    alert( "你点我了" );A2z办公区 - 实用经验教程分享!

    e.stopImmediatePropagation();A2z办公区 - 实用经验教程分享!

    }, True);A2z办公区 - 实用经验教程分享!

    这里函数里面的参数名字改了还是一样可以阻止事件的捕获。A2z办公区 - 实用经验教程分享!

    阻止事件捕获的方法A2z办公区 - 实用经验教程分享!

  • 注意事项

    • 注意区分阻止事件和捕获事件

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!A2z办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码