v0.13+" class="reference-link">事件冒泡 v0.13+

Weex 2.0 实现了 W3C 标准的事件冒泡机制。

使用

  1. <template>
  2.   <div class="root" @click="rootClick" bubble="true">
  3.     <text style="font-size: 40px;">{{rootText}}</text>
  4.     <div class="outer" @click="parentClick">
  5.       <div>
  6.         <text style="font-size: 40px;">{{parentText}}</text>
  7.       </div>
  8.       <text class="inner" @click="click">{{innerText}}</text>
  9.     </div>
  10.   </div>
  11. </template>
  13. <script>
  14.   module.exports = {
  15.     data: {
  16.       innerText: 'click me',
  17.       parentText: '',
  18.       rootText: ''
  19.     },
  20.     methods: {
  21.       click: function(e) {
  22.         this.innerText = 'inner bubble'
  23.       },
  24.       parentClick: function(e) {
  25.         this.parentText = 'parent bubble'
  26.       },
  27.       rootClick: function(e) {
  28.         this.rootText = 'root bubble'
  29.       }
  30.     }
  31.   }
  32. </script>
  34. <style scoped>
  35.   .inner {
  36.     font-size: 40px;
  37.     text-align: center;
  38.     background-color: #7a9b1b;
  39.     padding: 40px;
  40.   }
  42.   .outer {
  43.     font-size: 40px;
  44.     text-align: center;
  45.     background-color: #9b7a1b;
  46.     padding: 120px;
  47.   }
  49.   .root {
  50.     font-size: 40px;
  51.     text-align: center;
  52.     background-color: #7a1b9b;
  53.     padding: 80px;
  54.   }
  55. </style>

try it

运行以上代码，用客户端打开，点击中间的元素，可以看到事件向上传播，依次触发。

注意

需要注意的是: 为了兼容之前的版本，Weex 默认不会开启事件冒泡机制。需要在根元素的属性上，添加 bubble="true" 来开启冒泡机制。否则，将不会向上传播事件，保持与之前版本的效果相同。

stopPropagation

在事件处理函数中，可以使用 e.stopPropagation() 方法，来阻止本次事件向上的传递过程。注意，e.stopPropagation() 与 bubble="true" 不同，前者只会影响当前元素以及父元素的传播，不会影响子元素的传播；后者是为了版本兼容而增加的开关机制，会全局关闭或者开启冒泡机制，两者可以共同存在使用，如下：

  1. <template>
  2.   <div class="root" @click="rootClick" bubble="true">
  3.     <text style="font-size: 40px;">{{rootText}}</text>
  4.     <div class="outer" @click="parentClick">
  5.       <div>
  6.         <text style="font-size: 40px;">{{parentText}}</text>
  7.       </div>
  8.       <text class="inner" @click="click">{{innerText}}</text>
  9.     </div>
  10.   </div>
  11. </template>
  13. <script>
  14.   module.exports = {
  15.     data: {
  16.       innerText: 'click me',
  17.       parentText: '',
  18.       rootText: ''
  19.     },
  20.     methods: {
  21.       click: function(e) {
  22.         this.innerText = 'inner bubble'
  23.       },
  24.       parentClick: function(e) {
  25.         this.parentText = 'parent bubble'
  26.         e.stopPropagation()
  27.       },
  28.       rootClick: function(e) {
  29.         this.rootText = 'root bubble'
  30.         // e.stopPropagation()
  31.       }
  32.     }
  33.   }
  34. </script>
  36. <style scoped>
  37.   .inner {
  38.     font-size: 40px;
  39.     text-align: center;
  40.     background-color: #7a9b1b;
  41.     padding: 40px;
  42.   }
  44.   .outer {
  45.     font-size: 40px;
  46.     text-align: center;
  47.     background-color: #9b7a1b;
  48.     padding: 120px;
  49.   }
  51.   .root {
  52.     font-size: 40px;
  53.     text-align: center;
  54.     background-color: #7a1b9b;
  55.     padding: 80px;
  56.   }
  57. </style>

try it

运行以上代码，用客户端打开，点击中间的元素，可以看到事件向上传播到父元素被终止，不再继续往根元素传播。