1. 程式人生 > >微信小程序 --- 事件綁定

微信小程序 --- 事件綁定

阻止事件冒泡 結束 app ons 9.png http strong tap touch

事件類別

tap:點擊事件;

longtap:長按事件;

touchstart:觸摸開始;

touchend:觸摸結束;

touchcansce:取消觸摸;

事件綁定

bind綁定;

catch綁定;(能阻止事件冒泡)

例如:綁定點擊事件 bindtap

page.wxml 文件

<button bindtap="btnclick"></button>

page.js 文件

//獲取應用實例
const app = getApp()
Page({
  data: {
    text: "你好",
    onOff: false
  },
  btnclick:function
(){ console.log(‘123‘); var onOff = this.data.onOff; this.setData({text:"hello",onOff:!onOff}); } })

事件詳解:(類型 type ; 時間戳 timeStamp;事件源組件 target ; 當前事件 currentTarget ; 觸摸點數 touches)

例如:打印一個點擊事件

技術分享圖片

顯示:

技術分享圖片

currentTarget:是我們點擊的這個 view;

target:是我們目標的這個 view;

可以給這個 view 加一個 id:

技術分享圖片

效果:

技術分享圖片

在冒泡的事件中: currentTarget 和 target是不一致的; currentTarget是我們綁定了的組件,target是發生事件的組件;

currentTarget裏面的 dataset是沒有數據的。這個是為了方便我們添加我們自定義的屬性:

技術分享圖片

可以看到:

技術分享圖片

通過點擊事件,可以獲取到這個空間的屬性,從而可以方便我們的邏輯。

這個會很實用

微信小程序 --- 事件綁定