微信小程序开发——事件

WeChat小程序交流（QQ群：769977169）

效果图

代码示例

1、xxx.wxml

<view class='view'>{{clickMsg}}</view>
<view class='view0' id="view0" bindtap='clickMe'>bind 点击view0</view>
<view class='view1' id="view1" bindtap='clickMe'>bind 点击view1</view>
<view class='view1' id="view2" bindlongtap='longClick' data-title="longTap">bind 长按事件</view>
<view class='view1' id="view3" catchtap='catchClick' data-title="catchView">catch 点击</view>
<view class='view1' id="view4" bindtouchstart='startClick' bindtouchcancel='cancelClick' bindtouchmove='moveClick' bindtouchend='endClick'>bind start</view>

2、xxx.wxjs

var count = 0;

Page({

  /**
   * 页面的初始数据
   */
  data: {    
    clickMsg: "显示点击的内容"
  },

  clickMe: function (even) {
    console.log(even);

    var id = even.currentTarget.id;
    count++;
    this.setData({
      clickMsg: "显示点击内容" + id + "点击了" + count + "次",
    });
  },

  longClick: function(even) {
    console.log(even);
    this.setData({
      clickMsg: "长按事件",
    });
  },

  catchClick: function(even) {
    console.log(even);
    this.setData({
      clickMsg: "catch 点击事件",
    });
  },

  startClick: function(even) {
    this.setData({
      clickMsg: "点击开始",
    });
  },

  moveClick: function (even) {
    this.setData({
      clickMsg: "点击移动",
    });
  },

  cancelClick: function (even) {
    this.setData({
      clickMsg: "点击退出",
    });
  },

  endClick: function (even) {
    this.setData({
      clickMsg: "点击结束",
    });
  }
}

注意：

事件主要包括：点击、长按、点击开始、点击移动、点击结束等。

1、bind事件，父类组件对应的方法也会被调用

2、catch事件，父类组件对应的方法不会被调用