在读Touch事件官方文档的时候,遇到了一个属性
其他属性都好理解,这个阻塞事件冒泡什么意思呢?官网也没有解释
后来查资料知道这个方法是阻止onTouch冒泡传递到父组件。
show code
@Entry
@Component
struct OfficialTouchPage {
@State message: string = ' touch me touch me'
static idNumber = 0
build() {
Row() {
Column() {
Stack(){
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onTouch((touch: TouchEvent) => {
this.message = 'touch type' + touch.type
+'\n timestamp' +touch.timestamp
+'\n source' +touch.source
})
Text('这是最上边的')
.fontSize(30)
.width(200)
.height(200)
.backgroundColor(Color.Brown)
.fontWeight(FontWeight.Bold)
.onTouch((touch: TouchEvent) => {
//这里不调用子组件的touch.stopPropagation
// touch.stopPropagation()
})
}
.onTouch((touch: TouchEvent) => {
OfficialTouchPage.idNumber++
this.message = '点击了父组件'+OfficialTouchPage.idNumber
})
}
.width('100%')
}
.height('100%')
}
}
如上代码 ,我在statck组件添加了touch事件,并且在子组件Text('这是最上边的')也添加了touch事件,并且touch中不调用touch.stopPropagation()。这样我在点击这个Text的时候,子组件与父组件的touch事件都会响应,也就是我可以成功修改this.message.
如果打开touch.stopPropagation(),那么我在点击Text的时候,就不会触发父组件Stack的touch事件。
另外,官网的这个解释(阻塞事件冒泡)真的让人有点摸不到头脑,汉语真有意思~~