javascript常见事件的一些解析

最近在做项目改版 由于本期交互较多，并且同时要兼顾移动端和pc端，并且有各种的交互事件 所以也不可避免的踩了一些坑，为了避免以后继续踩坑，还是把这些事件需要注意的地方列举出来了
1、mousedown事件与click事件区别
相信大家对click事件在移动触屏端会有400ms的延迟已经非常不陌生了，于是如果能够兼顾移动端和pc端的情况下 大部分人的处理方法就是说使用mousedown，touchdown来区分，但是这样做会有一个小小的坑，那就是当你想对一个元素既绑定左键事件的同时又绑定右键事件，那么mousedown在你触发右键事件的同时就会被触发两次，触发的顺序为

mousedown ---> contextmenu

因此如果我们想做判断的话，可以通过以下的方式

if (e.button === 0 || e.touches) {
  // 左键单击事件
}

2、 input的onblur事件与回车事件冲突
需求里有一项产品要求的是说 需要在修改完名称后 回车或者点击别处的时候 能够保存名称，对于点击别处就保存这个可以很轻易的使用blur事件，但是有一个很讨厌的点 就是如果使用回车事件的时候也很容易触发blur事件，经过实践之后 我想到了一个好的办法，代码如下所示

<input
  @keydown.13="$event.target.blur"
  @blur="blurFuction" />

这种做法也就是说让回车事件能够直接触发到blur事件
3、 自建组件popover的一些坑
由于以往在使用elementUi组件的同时 会有很多不可预测的坑（笑） 所以这次大部分都是自己写的 其中有一个popover
写过这类组件的小伙伴都知道 会遇到一个非常麻烦的问题 那么我们通常希望这样一个popover组件在点击空白区域消失，但是又希望在点击可以触发的地方时可以显示，那么这个时候就有时候会很头疼
对此 这期的时候 我是用了vue中的slot大致结构如下所示

<template>
  <div class="menupop">
    <slot class="troggle-icon" @click="troggleOpen"></slot>
  <slot class="pop-list" v-clickoutside="close" v-show="open" ></slot>
  </div>
</template>

这里用第一个slot用来自定义触发标签
用pop-list用来自定义popover内的选项 为了实现点击i空白处可以消失，从可复用性出发 我们增加了一个指令directives

directives: {
  clickoutside: {
    bind: function (el, binding, vnode) {
        const documentHandler = function (e) {
            if (!vnode.context || el.contains(e.target)) return;
            binding.value(e);
        }
        setTimeout(() => {
            document.addEventListener('click', documentHandler);
        }, 0)
      }
  }
}

4、触屏模式下使用touchend会有难以去除的阴影
虽然这个问题影响不大 但是默认的阴影确实有点恶心，解决的方法也比较简单,但是思考的过程仍然很痛苦
-webkit-appearance：none
（持续更新中。。。。）