Micro letter applet - Event | transfer | bubble

event

Common events:

Types of	Triggering conditions	Minimum version
touchstart	Finger touch operation start
touchmove	After moving a finger touch
touchcancel	A finger touch action is interrupted, such as call reminder, pop
touchEnd	Finger touch operation is completed
tap	Finger touch and release immediately
longpress	After the touch of a finger, then left more than 350ms, if a specified event callback function and triggered the event, tap the event will not be triggered	1.5.0
longtap	After the touch of a finger, then leave more than 350ms (instead of recommended longpress event)
transitionend	Will trigger at the end of WXSS transition or animation wx.createAnimation
animation start	Will be triggered when a WXSS animation animation starts
animationiteration	Will be triggered when a WXSS animation end of an iteration
animationend	Will be triggered when a WXSS animation animation is complete
touchforcechange	In support 3D Touch of iPhone devices, heavy schedule will trigger

Note there are two points :

Touchcancle: Under certain scenarios will trigger (such as call interrupt, etc.) 
TAP events and longpress trigger events usually only one

 

tap click event

When the view layer events, some events if necessary carry some parameters to the function performed, this time it can pass

data- attributes to complete:

1 format: attribute name data-

2 get: name of the property e.currentTarget.dataset

eg:

test.wxml

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

 

test.js

Page ({ 
  Data: { 
    name: 'Word' , 
  }, 
  the Click: function (e) {
     // Parameters e entire event 
    the console.log (e)   // print the entire event 
    // get delivered from the event parameters 
    const data = e.currentTarget.dataset;   
    the console.log (Data)   // print dataset value 
  } 
) 
// parameter e is a whole event 
// parameters are passed in the event of currentTarget.dataset

 

 

The difference touches and changedTouches

 

Event delivery and bubbling

test.js

Page ({ 
   : click1 function () { 

    the console.log ( "out" ) 
  }, 
  click2: function () { 

    the console.log ( "middle" ) 
  } 
  , CLICK3: function () { 

    the console.log ( "inside " ) 
  }, 
  CAP1: function () { 

    the console.log ( " passed out " ) 
  }, 
  CAP2: function () { 

    the console.log ( " transfer, the intermediate " ) 
  } 
  , CAP3: function () { 

    Console. log ( "pass, inside the")
  }, 
})

 

Transmitting 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>

 

 Bubble bind: tap = "click1"

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

 

 Event delivery and prevent bubbling 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>

 

 

 Note: Adapted from small ape learn