view节点，包含image节点后，绑定animation事件
aYoungBoy8
- 发布：2025-04-24 16:11
- 更新：2025-04-25 10:27
- 阅读：142
产品分类： uniapp/H5
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 14.6.1
浏览器平台： Firefox
浏览器版本： 136.0.4
项目创建方式： CLI
CLI版本号： 4.57
操作步骤：
预期结果：
不会触发animation相关事件
不会触发animation相关事件
实际结果：
触发了animation相关事件
触发了animation相关事件
bug描述：
view节点，包含了image节点后，监听view节点的animation相关事件，即使没有任何动画，也会触发事件，空的view节点不会触发。
只有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 />aYoungBoy8 (作者)
<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节点注释掉后，事件就不会触发
aYoungBoy8 (作者)
我的html结构中，有很多个image子节点，那岂不是每个都要阻止一下，有别的方法吗？
2025-04-24 22:47
名帝
回复 aYoungBoy8: 难搞，全局搜索： <image 然后批量加@animationstart.stop试试呢
2025-04-25 10:47