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

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

使用

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

try it

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

注意

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

stopPropagation

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

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

try it

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