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

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>

to read

1. 事件委托和冒泡机制有关系吗？