uniapp app模式 v-html渲染元素添加点击事件

跟AI大战几十回合也没能解决

app模式下不支持dom操作

最终还是通过搜索引擎来解决掉

uni-app v-html如何获取dom节点并设置点击事件

ask.dcloud.net.cn/question/13...

uniapp.dcloud.net.cn/tutorial/re...

官网关于renderjs也没有实际使用例子

写这个文章只为碰到这个问题的人能够快速搜到这个解决方法。

完整示例代码

例子为点击英语单词触发事件

js 复制代码
<template>
  <view class="content">
    <view class="container" v-html="content"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        content: `
                  <p style="">Yang Hui was born in Longyuan, Fujian. She grew up in a small village. She lost all her fingers and feet when she was three. She was badly burnt by accident when she went out with her grandparents. She couldn't walk and she seldom went out.</p> \r 
                  <p style="">The young girl had to learn to do everything. At first she wasn't able to use chopsticks. Her parents had to teach her for a long time. Thanks to her contentong <u>will</u> to do everything by herself, she overcame those difficult times. Now she can look after herself. She also loves studying and she has finished the junior high school courses.<br> About five years ago, Yang Hui saw someone make cross-stitch(十字绣)and she decided to learn to make it herself. As you can imagine, it's very difficult to make it without fingers. Yang Hui failed so many times. But she never gave up. And through many hours of practice, now she can use her arms to make good cross-stitch works and she is faster than other people. "One had to put great efforts into what she was doing." Yang Hui said.</p> \r 
                  <p style="">Now she is 21 years old and she is in hospital in Fujian. She continues making a 1.83-meter-long cross-stitch work with arms. She has no enough money for her operations(手术). Many kind-hearted people come to visit her and call on people to raise money for her.</p> \r 
                  <p style="">As for her future, Yang Hui said, "I hope to stand up and walk one day after operations. I want to make more money by selling cross-stitch works."</p> \r 
                  <p style="">If you want to know more about Yang Hui and help her, please call 13004982348,</p> \r 
                  <p style="">                       (<i>From Fuzhou News</i>)</p>
                `
      }
    },
    onLoad() {
      // 页面加载时处理内容
      this.content = this.wrapWordsWithSpan(this.content);
      console.log(this.content);
    },
    // 页面销毁前移除事件监听器
    onUnload() {

    },

    methods: {

      wrapWordsWithSpan(htmlContent) {
        // 正则表达式,匹配英文单词并忽略HTML标签内的内容
        // const regex = /(?<=^|>|\s)([a-zA-Z]+)(?=<|\s|$)/g;
        const regex = /(?<=^|\s|>)([a-zA-Z]+)(?=[.,;:!?]|\s|<|$)/g;
        return htmlContent.replace(
          regex,
          (match) => `<span class="ceshi" data-word="${match}">${match}</span @click="printWord(match)">`
        );
      }
    }
  }
</script>

<script lang="renderjs">
  export default {
    mounted() {
      // 获取所有class为'ceshi'的元素
      const ceshiElements = document.querySelectorAll('.ceshi');

      // 为每个元素添加点击事件
      ceshiElements.forEach((element) => {
        console.log("循环", element);
        // 使用addEventListener来添加点击事件
        element.addEventListener('click', function() {
          // 在这里,'this'指向当前被点击的元素
          console.log(this.getAttribute('data-word')); // 获取并打印data-word属性的值
        });
      });
    }
  }
</script>
<style>

</style>
相关推荐
浪里行舟30 分钟前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1231 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚1 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院1 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233401 小时前
React组件完全指南
前端·javascript·react.js
qq7798233402 小时前
React Hooks完全指南
前端·javascript·react.js
Moment2 小时前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端
DoraBigHead2 小时前
React Fiber:从“递归地狱”到“时间切片”的重生之路
前端·javascript·react.js
lecepin3 小时前
AI Coding 资讯 2025-10-22
前端·javascript·后端
BumBle4 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app