vue中transition内部元素click/touch事件无效

发布于 2022-09-12 04:08:23 字数 1763 浏览 20 评论 0

我遇到这样一个问题:下图中标记部分点击无效。如果没加transition是可以的,我加transition是为了切换的功能。
图中两个地方是vant组件。
image.png

大概代码:

<transition :name="direction">
        <div v-if="show" class="content-wrapper">
          <div class="rc-answer">
            <van-radio-group
              v-model="result.res"
              direction="horizontal"
              checked-color="#FFB500"
              icon-size="30"
              @change="handleAnswer"
            >
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </div>
          <div class="rc-more">
            <div class="rcm-wrapper">
              <div class="remark">
                <textarea v-model="result.remark" placeholder="添加备注..."></textarea>
              </div>
              <div class="uploader">
                <van-uploader
                  v-model="fileList"
                  :before-read="beforeRead"
                  :after-read="afterRead"
                  :max-count="3"
                  multiple
                >
                  <div class="handler">
                    <svg-icon icon-name="iconplus"></svg-icon>
                  </div>
                </van-uploader>
              </div>
            </div>
          </div>
        </div>
      </transition>

我也尝试在其他dom上加touchstart/click事件,均无效。
这是什么原因导致的呢?


问题既然发出来了,我就不删除了,我的原因是我在transition的直接父元素 添加了touchstart.prevent.stop = "xxx",所以导致事件无法向内部传递(捕获阶段被拦截),也就里面的事件失效了,把prevent去掉即可。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文