点击第一次不生效 拖拽第一次不生效 click事件 mousedown事件

业务场景 ：拖拽时，第一次拖拽不生效，第二次才生效。

原因：html的渲染和js的处理需要时间，尽管js是单线程的，但是在细微情况下并不是。所以当标签多时，事件写在外层标签时，没有生效，写修饰符也不生效。写在最底层标签就生效了。

方案： 事件要写在最底层的标签，如果写在外层标签，第一次事件不生效。（不管click事件或mousedown事件都一样的，这里为了拖拽更流畅用了mousedown）

旧写法：

<div class="">
  <div v-for="(item ,index) in tables" :key="index" @mousedown="onmousedownchange()">
    <div class="container">
      <img :src="deciveImg" alt="" :id="item.id" class="deviceImg">
      <span>{{item.name}}</span>
     </div>
   </div>
</div>

新写法

<div class="">
  <div  v-for="(item ,index) in tables" :key="index">
    <!-- 事件要写在最底层的标签，如果写在外层标签 第一次事件不生效 -->
    <div class="container">
      <img :src="deciveImg" alt="" :id="item.id" class="deviceImg" @mousedown="onmousedownchange()">
      <span>{{item.name}}</span>
    </div>
  </div>
</div>