【微信小程序】微信小程序点击事件返回值的target分析
本文为旧博客迁移的文章
开始
在微信小程序中创建以下图片

然后在调试中点击下面第5个。
console返回两个e
第一个e是第5块小块的e

第二个e是下面全部9小块组成的大块的e

可以看到,currentTarget节点是不一样的。
分析
在HTML或者WXML这些基于XML的树形结构的界面布局方式中,元素与元素之间是有层级关系的,子级元素上触发的事件,可以向父级元素逐层向上传递,所以,父级元素上也可以捕获子级元素上的事件并进行逻辑处理。
- 使用 bind 开头的事件绑定,这种绑定不会阻止冒泡事件向上冒泡
- 使用 catch 开头的事件绑定,这种绑定可以阻止冒泡事件向上冒泡
结论
event对象中
- target是事件产生的源头组件
- currentTarget则是当前捕获这个事件的组件。
(current - adj. 现在的; 最近的; 流行的; 流传的; n. 电流; 趋势; 水流; 涌流; )
target.id/currentTarget.id 为 目标事件的id

附录
测试使用的代码
wxml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
| <view class="section"> <movable-area style="height: 300px;width: 300px; background: red;"> <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true"> 1 </movable-view> <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true"> 2 </movable-view> <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true"> 3 </movable-view> <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true"> 4 </movable-view> <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true"> 5 </movable-view> <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true"> 6 </movable-view> <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true"> 7 </movable-view> <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true"> 8 </movable-view> <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true"> 9 </movable-view> </movable-area> <view style="height: 300px;width: 300px; background: red;" class="main" bindtap="viewmove"> <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view"> 1 </view> <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view"> 2 </view> <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view"> 3 </view> <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view"> 4 </view> <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view" bindtap="viewmove"> 5 </view> <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view"> 6 </view> <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view"> 7 </view> <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view"> 8 </view> <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view"> 9 </view> </view> <view class="btn-area"> <button size="mini" bindtap="tap"> click me to move to (30px, 30px) </button> </view> 。 。 。 。 。 。 。 。 。 </view>
|
wxss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| .k { background:green; height:100px; width:100px; position:absolute; } movable-view { height:98px; width:98px; background:blue; position:relative; border:1px dashed #fff; } .view { height:98px; width:98px; background:blue; position:relative; border:1px dashed #fff; display:inline-block; } .main { margin-top:10px; }
|
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
|
var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, x: 0, y: 0 }, onLoad: function() { console.log('onLoad') var that = this app.getUserInfo(function(userInfo) { that.setData({ userInfo: userInfo }) }) }, tap: function(e) { this.setData({ x: 30, y: 30 }); }, scroll: function() { console.log("haha") }, move: function(e) { this.setData({ left: e.touches[0].clientX - 60, top: e.touches[0].clientY - 60 }) console.log(e) }, b1: function(e) { console.log(e) }, viewmove: function(e) { viewmove(e, this) }
})
function viewmove(e, that) { console.log(e) }
|
welcome to https://iwwee.com