@lizlalala
2016-09-11T07:49:34.000000Z
字数 569
阅读 1125
todo
toread
最近遇到一个诡异的事情,
需求是这样的,一个dropdown, css中focus(父元素.dropdown)的时候显示下拉菜单,点击里面的项(click绑定在li上,里面有a标签)的时候标题显示该项内容。但是实际运行的时候,click事件不会被触发。实测后发现是a的默认click事件劫持了父li的click处理。加上.prevent标签就可以。
<li class="dropdown" tabindex="0">
<div class="dropdown-left">
<a class="dropdown-toggle">
{{chosenFileType||"导出文件"}}<span class="caret"></span>
</a>
<ul class="dropdown-items">
<li v-for="fileType in fileTypes" class="item" @click.stop="chooseFileType(fileType)">
<a href="javascript:void(0)" >{{fileType}}</a>
</li>
</ul>
</div>
<button v-show="isChoosingFile">导出</button>
</li>