1:事件冒泡
在微信小程序开发工具中,新建event文件夹,新建文件,在event.wxml中填写如下代码:
这里是view 1 这里是view 2 这里是view 3
在event.wxss中填写如下代码:
.view1{ height: 500rpx; width: 100%; background-color:beige;}
.view2{ height: 400rpx; width: 80%; background-color: red;}
.view3{ height: 300rpx; width: 60%; background-color:aqua;}
在event.js中增加如下代码:
//事件处理函数 view1click : function(event){ console.log("view1click") }, view2click : function(){ console.log("view2click") }, view3click : function(event){ console.log("view3click") },
编译并运行,然后在模拟器中点击view3区域结果如图1所示:可以看到,除了view3之外,view2和view1的点击事件都响应了,这就是点击事件冒泡
上述代码中:view1click : function(event)增加打印传入的event事件信息代码如下:编译运行如图3所示:
view1click : function(event){ console.log("view1click") console.log(event) }
其中dataset中为自定义的属性,id:100,title: “新闻标题”,这个自定义属性设置在如下代码:
更多微信小程序事件相关文章请关注PHP中文网!