[关闭]
@lizlalala 2016-09-10T23:49:34.000000Z 字数 569 阅读 816

事件冒泡、默认事件相关知识

todo toread


最近遇到一个诡异的事情,
需求是这样的,一个dropdown, css中focus(父元素.dropdown)的时候显示下拉菜单,点击里面的项(click绑定在li上,里面有a标签)的时候标题显示该项内容。但是实际运行的时候,click事件不会被触发。实测后发现是a的默认click事件劫持了父li的click处理。加上.prevent标签就可以。

  1. <li class="dropdown" tabindex="0">
  2. <div class="dropdown-left">
  3. <a class="dropdown-toggle">
  4. {{chosenFileType||"导出文件"}}<span class="caret"></span>
  5. </a>
  6. <ul class="dropdown-items">
  7. <li v-for="fileType in fileTypes" class="item" @click.stop="chooseFileType(fileType)">
  8. <a href="javascript:void(0)" >{{fileType}}</a>
  9. </li>
  10. </ul>
  11. </div>
  12. <button v-show="isChoosingFile">导出</button>
  13. </li>

to read

  1. 事件委托和冒泡机制有关系吗?
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注