首页 > 软件开发 > JQUERY >

js如何阻止事件冒泡

来源:互联网 2023-03-17 00:47:32 158

在页面开发中,我们使用js添加事件后,默认情况事件会向上冒泡的,那如何阻止事件冒泡呢?很简单,我们来看一下。

WmT办公区 - 实用经验教程分享!

WmT办公区 - 实用经验教程分享!

方法/步骤

  • 1

    我们先在一个div里,放置一个按钮。

    WmT办公区 - 实用经验教程分享!

    WmT办公区 - 实用经验教程分享!

    js如何阻止事件冒泡WmT办公区 - 实用经验教程分享!

  • 2

    然后使用jquery来为按钮添加事件,事件函数里就是在浏览器控制台里输出一条字符串。

    WmT办公区 - 实用经验教程分享!

    WmT办公区 - 实用经验教程分享!

    js如何阻止事件冒泡WmT办公区 - 实用经验教程分享!

  • 3

    接着为父层div也添加一个事件,事件同样是在控制台输出信息。

    WmT办公区 - 实用经验教程分享!

    WmT办公区 - 实用经验教程分享!

    js如何阻止事件冒泡WmT办公区 - 实用经验教程分享!

  • 4

    运行页面,我们只点击一下按钮。

    WmT办公区 - 实用经验教程分享!

    WmT办公区 - 实用经验教程分享!

    js如何阻止事件冒泡WmT办公区 - 实用经验教程分享!

  • 5

    点击后,在控制台里看到二个事件的字符串都输出来了,表明点击按钮时,事件冒泡到div里了,触发了div的点击事件。

    WmT办公区 - 实用经验教程分享!

    WmT办公区 - 实用经验教程分享!

    js如何阻止事件冒泡WmT办公区 - 实用经验教程分享!

  • 5此文章未经许可获取自百度经验
  • 6

    要阻止事件冒泡很简单,我们调用e.stopPropagation()方法就行了,其中e就是事件参数。WmT办公区 - 实用经验教程分享!

    js如何阻止事件冒泡WmT办公区 - 实用经验教程分享!

  • 7

    这样我们这里点击按钮后,就不会触发div的事件了,就是说事件没有冒泡到div层了。

    WmT办公区 - 实用经验教程分享!

    WmT办公区 - 实用经验教程分享!

    js如何阻止事件冒泡WmT办公区 - 实用经验教程分享!

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


    标签: JQUERYCSSHTML

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