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

ethanYin
  • 125

我遇到这样一个问题:下图中标记部分点击无效。如果没加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去掉即可。

回复
阅读 1.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏