背景:看板里的卡片,要做卡片編輯,編輯標題時,點擊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