阿里云赞助

Event Bubble

Event Bubble v0.13+

Weex 1.0 implements the W3C standard event bubbling mechanism.

Usage

<template>
<div class="root" onclick="rootClick" bubble="true">
<div>
<text style="font-size: 40px;">{{rootText}}</text>
</div>
<div class="outer" onclick="parentClick">
<div>
<text style="font-size: 40px;">{{parentText}}</text>
</div>
<text class="inner" onclick="click">{{innerText}}</text>
</div>
</div>
</template>
<script>
module.exports = {
data: {
innerText: 'click me',
parentText: '',
rootText: ''
},
methods: {
click: function(e) {
this.innerText = 'inner bubble'
},
parentClick: function(e) {
this.parentText = 'parent bubble'
},
rootClick: function(e) {
this.rootText = 'root bubble'
}
}
}
</script>
<style>
.inner {
font-size: 40px;
text-align: center;
background-color: #7a9b1b;
padding: 40px;
}
.outer {
font-size: 40px;
text-align: center;
background-color: #9b7a1b;
padding: 120px;
}
.root {
font-size: 40px;
text-align: center;
background-color: #7a1b9b;
padding: 80px;
}
</style>

try it

Run the above code, open with the client, click on the middle of the elements, you can see the event spread up, followed by the trigger.

Notice

One thing should be noticed: For compatibility with previous versions, Weex does not turn on event bubbling by default. You need to add bubble = "true" on the root element’s properties to turn on the bubbling mechanism. Otherwise, the event will not be propagated upwards, keeping the same effect as the previous version.

stopPropagation

In the event handler function, you can use the e.stopPropagation() method to prevent the event from escalating. Note that e.stopPropagation() differs from bubble = "true", which affects only the current elements and the propagation of parent elements, without affecting the propagation of child elements; the latter is a switching mechanism that is added for compatibility, Will be a global shutdown or open the bubble mechanism, the two can co-exist, as follows:

<template>
<div class="root" onclick="rootClick" bubble="true">
<div>
<text style="font-size: 40px;">{{rootText}}</text>
</div>
<div class="outer" onclick="parentClick">
<div>
<text style="font-size: 40px;">{{parentText}}</text>
</div>
<text class="inner" onclick="click">{{innerText}}</text>
</div>
</div>
</template>
<script>
module.exports = {
data: {
innerText: 'click me',
parentText: '',
rootText: ''
},
methods: {
click: function(e) {
this.innerText = 'inner bubble'
},
parentClick: function(e) {
this.parentText = 'parent bubble'
e.stopPropagation()
},
rootClick: function(e) {
this.rootText = 'root bubble'
// e.stopPropagation()
}
}
}
</script>
<style>
.inner {
font-size: 40px;
text-align: center;
background-color: #7a9b1b;
padding: 40px;
}
.outer {
font-size: 40px;
text-align: center;
background-color: #9b7a1b;
padding: 120px;
}
.root {
font-size: 40px;
text-align: center;
background-color: #7a1b9b;
padding: 80px;
}
</style>

try it

Run the above code, open with the client, click on the middle of the element, you can see the event up to the parent element is terminated, no longer continue to spread to the root element.

Apache Incubator
Disclaimer: Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.


ApacheCopyright(c) 2017 The Apache Software Foundation. Licensed under the Apache License, Version 2.0