美文网首页
draggable里包裹的卡片,卡片里有个input,点击inp

draggable里包裹的卡片,卡片里有个input,点击inp

作者: wu_9f41 | 来源:发表于2021-07-06 15:29 被阅读0次

背景:看板里的卡片,要做卡片编辑,编辑标题时,点击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

相关文章

  • draggable里包裹的卡片,卡片里有个input,点击inp

    背景:看板里的卡片,要做卡片编辑,编辑标题时,点击input输入框,会触发draggable的choose事件,导...

  • react中视频功能和swiper遇到的坑

    接到一个react的需求,需要做一个卡片切换的需求,卡片包含轮播,每个卡片的轮播里有图片有视频,切换卡片之后轮播要...

  • zepto on绑定事件遇到的坑

    最近项目中有个卡片点击的需求,卡片有点击事件,卡片上的子元素也绑定点击事件,为了避免点击子元素冒泡,在子元素点击事...

  • Trello如何删除一个卡片Card

    点开Board看板,会看到一个个的卡片 点开《吃饭》卡片,右下角有个归档,点击归档 点击后会出现删除按钮,OK

  • 【Swift3】卡片功能

    添加卡片信息(卡片正反照片,名称,卡号和密码) 编辑修改卡片信息 卡片列表:可删除,移动 添加卡片信息 点击头部两...

  • 计算流动效率

    在卡片上,如果当前负责人是自己的卡片,点击后在菜单内会有开始按钮,点击开始 卡片开始计时,算开始工作。 再次点击变...

  • anki学会计:第三篇,了解anki基本术语

    3.1 卡片 在anki里一问一答配对成一张卡片. 卡片的一面是设置问题,另外一面则是答案。在 Anki 里卡片并...

  • 卡片里的玫瑰。

    卡片里的玫瑰 软木翎。 小叶没有来,在约定好的这个黄昏。倒是收到一个快递,文件袋里只有一张卡片。 是小叶寄来的,卡...

  • iCarousel旋转木马流布局

    需求:1.点击卡片跳至中心2.若点击的卡片已在中心,跳转控制器3.滑动卡片至中心 实现效果: 具体实现:遵守协议 ...

  • Trello《卡片内容增加》

    写好卡片名称之后,在右上角打勾,卡片建立即完成了。 完成之后,点击卡片名称,就会出现卡片内容的项目。 标签 用颜色...

网友评论

      本文标题:draggable里包裹的卡片,卡片里有个input,点击inp

      本文链接:https://www.haomeiwen.com/subject/hvegultx.html