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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容