首页 网络编程 前端制作 数据库 CMS教程 脚本编程 微信开发 小程序开发 服务器

小程序开发

热门: ASP.NET PHP编程 ASP编程 JSP编程

小程序中的冒泡事件与非冒泡事件

来源:未知 发布时间:2019-03-21

1、小程序中的事件分为两类:冒泡事件与非冒泡事件

  冒泡事件有:touchstart   touchmove   touchend  longtap   tap这五个事件,其余的事件为非冒泡事件。

  2、冒泡事件冒泡的条件:父元素与子元素绑定同一类事件并且子元素的绑定方式是bind(catch开头会阻止事件冒泡),代码如下:

 1 <view  id="outer"  bindtap="tap1">
 2     outer
 3     <view  id="inner"  catchtap="tap2">
 4         inner
 5     </view>
 6 </view>
 7 
 8 tap1: function(e){
 9   console.log(1,e)  
10 }
11 
12 tap2: function(e){
13   console.log(2,e)  
14 }

点击inner元素,只会执行tap2事件,

  3、子元素绑定longtap长按事件会触发父元素的tap点击事件

1 <view  id="outer"  catchtap="tap1">
 2     outer
 3     <view  id="inner"  catchlongtap="tap2">
 4         inner
 5     </view>
 6 </view>
 7 
 8 tap1: function(e){
 9   console.log(1,e)  
10 }
11 
12 tap2: function(e){
13   console.log(2,e)  
14 }

  在inner元素上,长按inner会输出2,对象e,长按事件的事件默认为350ms后触发事件,在松开手后会触发tap1事件。这里我就偷点懒就不贴图了。

  4、父元素使用touchstart  touchmove  touchend事件,将会覆盖子元素的事件;例如子元素#inner  绑定tap事件,父元素#outer 绑定touchstart事件,点击子元素,只会触发父元素的touchstart事件;

网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 微信开发 | 小程序开发 | 服务器 |

程序员学习网,提供最新的微信开发教程,小程序开发教程,网络编程、php教程、asp.net教程、微信公众平台二次开发教程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料,凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 程序员学习网 版权所有,并保留所有权利。

电脑版 | 移动版