码迷,mamicode.com
首页 > 微信 > 详细

微信小程序 - 事件 | 传递 | 冒泡

时间:2019-11-04 21:41:02      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:版本   get   常见   eve   微信小程序   mini   cti   cat   data   

事件

常见的事件有:

类型触发条件最低版本
touchstart 手指触摸动作开始  
touchmove 手指触摸后移动  
touchcancel 手指触摸动作被打断,如来电提醒,弹窗  
touchend 手指触摸动作结束  
tap 手指触摸后马上离开  
longpress 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 1.5.0
longtap 手指触摸后,超过350ms再离开(推荐使用longpress事件代替)  
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发  
animationstart 会在一个 WXSS animation 动画开始时触发  
animationiteration 会在一个 WXSS animation 一次迭代结束时触发  
animationend 会在一个 WXSS animation 动画完成时触发  
touchforcechange 在支持 3D Touch 的 iPhone 设备,重按时会触发  

有两个注意点

 Touchcancle: 在某些特定场景下才会触发(比如来电打断等)
? tap事件和longpress事件通常只会触发其中一个

 

tap 点击事件

当视图层发生事件时,某些情况需要事件携带一些参数到执行的函数中, 这个时候就可以通过

data-属性来完成:

1 格式:data-属性的名称

2 获取:e.currentTarget.dataset.属性的名称

eg:

test.wxml
# tap 点击事件
<button bind:tap=click data-name="{{name}}" data-age="20">按钮</button>

 

test.js
Page({
  data: {
    name: ‘word‘,
  },
  click: function (e) {
    // 参数 e 是整个事件
    console.log(e)  // 打印整个事件
    // 从事件中获取传递的参数
    const data = e.currentTarget.dataset;  
    console.log(data)  // 打印 dataset 的值
  },
)
// 参数 e 是整个事件
// 事件传递的参数都在 currentTarget.dataset 中

技术图片

 

 

touches和changedTouches的区别

技术图片

 

事件传递与冒泡

test.js
page({
   click1: function () {

    console.log("外面的")
  },
  click2: function () {

    console.log("中间的")
  }
  , click3: function () {

    console.log("里面的")
  },
  cap1: function () {

    console.log("传递,外面的")
  },
  cap2: function () {

    console.log("传递,中间的")
  }
  , cap3: function () {

    console.log("传递,里面的")
  }, 
})

 

传递 capture-bind:tap="cap1"

test.wxml
<!--事件传递-->
<view class="outer" capture-bind:tap="cap1">外面
  <view class="midder" capture-bind:tap="cap2">中间的
      <view class="inner" capture-bind:tap="cap3">里面
      </view>
  </view>
</view>

技术图片

 

 冒泡 bind:tap="click1"

<!--事件冒泡-->
<view class="outer" bind:tap="click1" >外面
  <view class="midder" bind:tap="click2" >中间的
    <view class="inner" bind:tap="click3" >里面
    </view>
  </view>
</view>

技术图片

 

 阻止事件传递与冒泡 catch

<!--阻止事件传递与冒泡-->
<view class="outer" bind:tap="click1" capture-bind:tap="cap1">外面
  <view class="midder" catch:tap="click2" capture-bind:tap="cap2">中间的
      <view class="inner" bind:tap="click3" capture-catch:tap="cap3">里面
      </view>
  </view>
</view>

 

技术图片

 

 注: 摘自 小猿取经

 

微信小程序 - 事件 | 传递 | 冒泡

标签:版本   get   常见   eve   微信小程序   mini   cti   cat   data   

原文地址:https://www.cnblogs.com/waller/p/11794768.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!