draggable里包裹的卡片,卡片里有個input,點擊input會觸發draggable的choose事件

背景:看板里的卡片,要做卡片編輯,編輯標題時,點擊input輸入框,會觸發draggable的choose事件,導致input輸入框無法聚焦

代碼結構:

  @choose="onChoose"
>
  <CardItem>
    <el-input
      v-model="systemTitle"
      type="textarea"
      :rows="2"
      @click.stop.native
    />
  </CardItem>
</draggable>

百度el-input的阻止事件冒泡,添加了

@click.stop.native
在線運行例子,代碼如下,發現確實可以阻止事件冒泡,但是在項目代碼draggable里面運行發現阻止不了。

   <el-input
    type="textarea"
    :rows="2"
    placeholder="請輸入內容"
    @click.stop.native
    v-model="textarea">
  </el-input>
    {{text}}
</div>

最后查看dragaable源碼里發現對于事件的監聽不是click事件,而是如下三個:

supportPointer: Sortable.supportPointer !== false && 'PointerEvent' in window && !Safari

 if (options.supportPointer) {
      on(el, 'pointerdown', this._onTapStart);
    } else {
      on(el, 'mousedown', this._onTapStart);
      on(el, 'touchstart', this._onTapStart);
    }

所以要在pc上添加@pointerdown.stop.native

鏈接:
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
https://www.w3cschool.cn/fetch_api/fetch_api-ipav2pzn.html

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。