uni-app rich-text图片点击无效

uni-app rich-text图片点击无效

这是一个段落。

这是nodes节点 但是根据tips所说 itemclick应该可以捕获到a标签 但会一直捕获img标签 我使用的是真机运行

9 回复

web 替换 uni-h5.zip 至 HBuilderX 根目录/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5
app 替换 uni-app-plus 至 HBuilderX 根目录/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-app-plus/dist
重新编译试试看

更多关于uni-app rich-text图片点击无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的 可以了 麻烦了

您好，麻烦发下可复现的demo以及运行平台。

uni-im上给你发了 在android真机上运行 点击图片只会捕获img标签 无法捕获外层a标签

你是哪个平台，我这里测试安卓是可以正常获取的

但是我并不希望a标签有文本 我希望的是点击img可以捕获到外层a标签

回复 用户2738867:去掉也能获取的

回复 DCloud_UNI_yuhe: 但是我这边去掉之后 一直捕获的都是img 我在uni-im上发给你这份demo？

在 uni-app 中，rich-text 组件默认情况下点击图片确实会触发 img 标签的点击事件，而不是 a 标签。这是因为 rich-text 的点击事件会优先捕获最内层元素的点击。

根据你提供的截图，你的 nodes 数据中图片被包裹在 a 标签内，理论上点击图片应该触发 a 标签的 itemclick。但实际运行中，如果图片覆盖了整个可点击区域，事件可能会被 img 标签拦截。

解决方案：

  1. 检查 nodes 数据结构，确保 a 标签设置了正确的 href 属性
  2. 在 rich-text 组件上添加 @itemclick 事件处理时，可以通过事件对象的 dataset 属性判断点击的是哪个元素
  3. 如果确实需要区分点击的是图片还是链接，可以在节点数据中为 img 标签添加自定义属性，然后在事件处理中通过 e.target.dataset 进行判断
// 事件处理示例
handleItemClick(e) {
  const dataset = e.detail.dataset
  // 通过 dataset 中的自定义属性判断元素类型
  if (dataset.type === 'image') {
    // 处理图片点击
  } else if (dataset.href) {
    // 处理链接点击
  }
}
回到顶部