如何获取事件冒泡里最顶层的元素（或者任意层的元素）

先举个例子，有如下DOM结构：

    <ul @click="toApply">              <li data-user-id="1">                    <img src="/static/user/face/4.jpg" class="user">                  <div class="info">                     <p class="name">ThreeTree</p>                     <p class="intro">                         <span class="man">19</span>                         大哥 想请教一个问题                       </p>                     <p class="from">来自：JS讨论群</p>                     <button class="agree">同意</button>                  </div>              </li>              <li data-user-id="2">                    <img src="/static/user/face/6.jpg" class="user">                  <div class="info">                     <p class="name">rshu</p>                     <p class="intro">                         <span class="man">19</span>                         我是rshu                      </p>                     <p class="from">来自：QQ群-ThinkPHP技术讨论中心</p>                     <button class="other">已拒绝</button>                  </div>              </li>              <li data-user-id="3">                    <img src="/static/user/face/7.jpg" class="user">                  <div class="info">                     <p class="name">云端之上</p>                     <p class="intro">                         <span class="man">19</span>                         你是腾讯的?                      </p>                     <p class="from">来自：临时会话</p>                     <button class="other">已拒绝</button>                  </div>              </li>              <li data-user-id="4">                    <img src="/static/user/face/8.jpg" class="user">                  <div class="info">                     <p class="name">后知后觉</p>                     <p class="intro">                         <span class="man">19</span>                         请求加为好友                      </p>                     <p class="from">来自：JS讨论群</p>                     <button class="other">已同意</button>                  </div>              </li>              <li data-user-id="5">                    <img src="/static/user/face/9.jpg" class="user">                  <div class="info">                     <p class="name mes">阿里巴巴社招内推</p>                     <p class="message">已发送验证消息</p>                     <button class="other">等待验证</button>                  </div>              </li>       </ul>

渲染结果如下图：

现在我的需求是点击每个LI里面的任何区域，都会根据LI的data-user-id属性跳转到各自的好友申请页面。显然我是不会直接在LI上绑定事件的，因为那样会造成浏览器的性能下降。更优的做法是在LI的父元素上绑定事件，也就是事件代理（或者说事件委托），事件代理原理是通过事件冒泡，点击LI元素，那么LI的父元素ul也会触发click事件，这样性能就得到了极大的提升。

但是，现在问题来了，我通过let target=e.target||e.srcElement来获取目标元素，获取到的target就可能是img，可能是p，可能是div，也可能是span，button。在这些子元素上是没有data-user-id属性的，这个属性唯独LI元素才有。也就是说，我只有拿到LI元素，才能获取data-user-id属性，不然是跳转不到好友申请页面的。

那怎样获取LI元素呢？这其实就是经典的获取事件冒泡里任意层指定的元素的问题，现在我提供一种完美的解决方案，可以获取任意层的父元素。

toApply方法如下：

 toApply(e){      let target=e.target||e.srcElement   // ES6的语法，用let声明一个变量      while(target.tagName!='LI'){        target=target.parentNode?target.parentNode:''  //不断取父节点来替换target      }      if(target) {   //如果目标元素LI存在        const user_id=$(target).attr('data-user-id')        this.$router.push({   //这是vue2.0的语法，跳转到指定页面          path: '/friendApply',          query: {user_id: user_id}         })      } }

我通过一个while循环，来不断地取target的父元素，直至target为父元素LI为止，取到后再跳转到各自的好友申请页面。这样问题就完美解决了。

总结：项目中遇到的坑，很多时候只要加以思索就可以解决。只有想不到，没有做不到。