【微信小程序】微信小程序点击事件返回值的target分析

wxapp Comments

本文为旧博客迁移的文章

开始

在微信小程序中创建以下图片

upload successful

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

upload successful

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

upload successful

可以看到，currentTarget节点是不一样的。

分析

在HTML或者WXML这些基于XML的树形结构的界面布局方式中，元素与元素之间是有层级关系的，子级元素上触发的事件，可以向父级元素逐层向上传递，所以，父级元素上也可以捕获子级元素上的事件并进行逻辑处理。

  • 使用 bind 开头的事件绑定，这种绑定不会阻止冒泡事件向上冒泡
  • 使用 catch 开头的事件绑定，这种绑定可以阻止冒泡事件向上冒泡

结论

event对象中

  • target是事件产生的源头组件
  • currentTarget则是当前捕获这个事件的组件。

(current - adj. 现在的; 最近的; 流行的; 流传的; n. 电流; 趋势; 水流; 涌流; )

target.id/currentTarget.id 为 目标事件的id

upload successful

附录

测试使用的代码

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
//index.js
//获取应用实例
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")
		console.log(e)
		//console.log(this.data.x)
	},
	viewmove: function(e) {
		viewmove(e, this)
	}

})

function viewmove(e, that) {
	console.log(e)
}

kajweb快乐的回忆

welcome to https://iwwee.com