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

2025-05-25 15:14:04

1、我们打开编辑器,创建一个test文档,直接在根目录创建index.html文件,然后引入jquery文件,主要是为了方便进行编写。

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

2、打开index.html文档,创建基础html代码,在sublime中,我们可以使用!html加tab快速创建,然后在里面添加两个div,来做代码演练。

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

3、在浏览器中打开index.html文件,使用f12快捷键来打开开发者工具。这里,我尺攵跋赈们需要解决在小程序中只给当前点击加上事件,这里需要了解一个浏览器机制问题,就是冒泡和捕获机制。微信中浏览儡泌掩羞器机制基础是chrome的内核,就是会产生冒泡机制,即事件触发,会从源节点传递到父节点,直到最后节点。

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

4、这里我们先来验证这个机制。在index.html文件中,引入jquery文件,然后编写js代码,写入两个click事件来演示这个触发问题。

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

5、保存后刷新浏览器,我们点击info,可以看到,在console下面同时输出了info和box。这里我们只想触发当前点击。

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

6、为info的click时间加上stopPropagation()事件,这个函数就是默认阻止冒泡的意思。注意不要漏掉e,这个表示当前点击节点。

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

7、重新刷新浏览器,点击info框,我们可以看到这里只输出了info。

微信小程序如何只给当前点击的加上事件
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢