首页 > 电脑专区 > 电脑教程 >

微信小程序如何只给当前点击的加上事件

来源:互联网 2023-02-21 23:09:36 版权归原作者所有,如有侵权,请联系我们

当前小程序很火热,做小程序可以有很多方法,这里主要使用js来进行演示。机制都是一样的。y0W办公区 - 实用经验教程分享!

工具/原料

  • sublime
  • 电脑

方法/步骤

  • 1

    我们打开编辑器,创建一个test文档,直接在根目录创建index.html文件,然后引入jquery文件,主要是为了方便进行编写。y0W办公区 - 实用经验教程分享!

    微信小程序如何只给当前点击的加上事件y0W办公区 - 实用经验教程分享!

  • 1
  • 2

    打开index.html文档,创建基础html代码,在sublime中,我们可以使用!html加tab快速创建,然后在里面添加两个div,来做代码演练。y0W办公区 - 实用经验教程分享!

    微信小程序如何只给当前点击的加上事件y0W办公区 - 实用经验教程分享!

  • 3

    在浏览器中打开index.html文件,使用f12快捷键来打开开发者工具。这里,我们需要解决在小程序中只给当前点击加上事件,这里需要了解一个浏览器机制问题,就是冒泡和捕获机制。微信中浏览器机制基础是chrome的内核,就是会产生冒泡机制,即事件触发,会从源节点传递到父节点,直到最后节点。y0W办公区 - 实用经验教程分享!

    微信小程序如何只给当前点击的加上事件y0W办公区 - 实用经验教程分享!

  • 4

    这里我们先来验证这个机制。在index.html文件中,引入jquery文件,然后编写js代码,写入两个click事件来演示这个触发问题。y0W办公区 - 实用经验教程分享!

    微信小程序如何只给当前点击的加上事件y0W办公区 - 实用经验教程分享!

  • 5

    保存后刷新浏览器,我们点击info,可以看到,在console下面同时输出了info和box。这里我们只想触发当前点击。y0W办公区 - 实用经验教程分享!

    微信小程序如何只给当前点击的加上事件y0W办公区 - 实用经验教程分享!

  • 6

    为info的click时间加上stopPropagation()事件,这个函数就是默认阻止冒泡的意思。注意不要漏掉e,这个表示当前点击节点。y0W办公区 - 实用经验教程分享!

    微信小程序如何只给当前点击的加上事件y0W办公区 - 实用经验教程分享!

  • 7

    重新刷新浏览器,点击info框,我们可以看到这里只输出了info。y0W办公区 - 实用经验教程分享!

    微信小程序如何只给当前点击的加上事件y0W办公区 - 实用经验教程分享!

  • 注意事项

    • 如果使用了外部文件,要注意引用路径不要发生错误

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


    标签: 软件JQUERY浏览器程序

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