没有挂载animation class却触发animation相关事件的uni-app问题

没有挂载animation class却触发animation相关事件的uni-app问题

操作步骤：

  • view节点，包含image节点后，绑定animation事件

预期结果：

  • 不会触发animation相关事件

实际结果：

  • 触发了animation相关事件

bug描述：

  • view节点，包含了image节点后，监听view节点的animation相关事件，即使没有任何动画，也会触发事件，空的view节点不会触发。
8 回复

是mode属性导致的dom结构变化，带上了animation属性，通过事件冒泡传递到了外层view处。如果不想触发的话，可以在image上阻止事件冒泡（参考第二张图片）


更多关于没有挂载animation class却触发animation相关事件的uni-app问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我的html结构中，有很多个image子节点，那岂不是每个都要阻止一下，有别的方法吗？

回复 aYoungBoy8: 难搞，全局搜索： <image 然后批量加@animationstart.stop试试呢

只有mode属性为 widthFix 或者 heightFix 时才会触发动画事件
可以考虑在需要阻止动画的image组件上面添加.stop
<image lazy-load src="…/…/static/logo.png" mode=“widthFix” @animationstart.stop></image> 或者封装一个组件
// StopPropagationImage.vue
<template>
<image v-bind="$attrs" @compositionstart=“handleCompositionStart” />
</template>

<script> export default { methods: { handleCompositionStart(e) { e.stopPropagation() } } } </script>

// 使用方式
<stop-propagation-image />

您好，方便发个可复现代码或demo吗？以便于更好的排查问题

快看一下，严重bug，相关的animation事件都要触发

<template> <view class="li" @animationstart="handleStart"> <view class="label">隐私政策</view> <image src="/src/static/icon/icon_more_arrow.png" mode="widthFix"></image> </view> </template> <script setup> const handleStart = () => { console.log('触发了事件'); } </script> <style lang="scss" scoped> </style>

将image节点注释掉后，事件就不会触发

是widthFix影响到的 删了就不会触发

回到顶部