使用js方法实现阻止按钮的默认点击事件&触发默认事件

功能需求

txt 复制代码
  1.谷歌浏览器插件需要实现在用户提交表单的时候触发阻止默认行为
  2.对表单数据进行分析,提交给ai分析
  3.ai对用户表单进行分析并返回结果
  4.有问题回显对应文案
  5.没问题则提交表单的默认点击事件

实现思路

测试表单

html 复制代码
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + React + TS + chrome</title>
  <link rel="stylesheet" href="/form.css">
  <!-- <script src="//g.alicdn.com/chatui/icons/2.6.2/index.js"></script> -->
</head>

<body>
  <form onsubmit="return false" action="#">
    <!-- <input name="name" id="name" type="text" class="feedback-input" placeholder="Name" />
    <input name="email" id="email" type="text" class="feedback-input" placeholder="Email" /> -->
    <textarea name="text" id="text" class="feedback-input" placeholder="Comment"></textarea>
    <input type="submit" id="submitBtn" value="SUBMIT" />
  </form>
  <div id="root"></div>
  <script>
    window.onload = function () {
      const submitBtn = document.getElementById('submitBtn')
      submitBtn.addEventListener('click', onsubmit)
      function onsubmit(e) {
        const text = document.getElementById('text').value
       alert(text)
      }
    }

  </script>
  <script type="module" src="/src/main.tsx"></script>
</body>

</html>

插件代码

tsx 复制代码
  useEffect(() => {
    const submitBtn = document.getElementById('submitBtn')! as HTMLButtonElement
    const overlayId = uuid()
    // 创建覆盖层
    const createOverlay = () => {
      const overlay = document.createElement('div')
      overlay.id = overlayId
      // 获取按钮位置和大小
      const updateOverlayPosition = () => {
        const rect = submitBtn.getBoundingClientRect()
        overlay.style.position = 'fixed'
        overlay.style.top = `${rect.top}px`
        overlay.style.left = `${rect.left}px`
        overlay.style.width = `${rect.width}px`
        overlay.style.height = `${rect.height}px`
        overlay.style.backgroundColor = 'transparent'
        overlay.style.zIndex = '100'
        overlay.style.cursor = 'pointer'
        overlay.style.pointerEvents = 'auto'
      }
      // 初始定位
      updateOverlayPosition()
      // 添加到DOM
      document.body.appendChild(overlay)
      // 监听窗口变化,更新位置
      window.addEventListener('resize', updateOverlayPosition)
      window.addEventListener('scroll', updateOverlayPosition)
      // 返回清理函数
      return () => {
        window.removeEventListener('resize', updateOverlayPosition)
        window.removeEventListener('scroll', updateOverlayPosition)
        if (overlay.parentNode) overlay.parentNode.removeChild(overlay)
      }
    }
    // 创建覆盖层并获取清理函数
    const removeOverlay = createOverlay()

    // 为覆盖层添加点击事件
    const overlay = document.getElementById(overlayId)! as HTMLDivElement
    overlay.addEventListener('click', handleClick)
    function handleClick() {
      const fn = () => {
        const name = (document.getElementById('name')! as HTMLInputElement)?.value
        const email = (document.getElementById('email')! as HTMLInputElement)?.value
        const text = (document.getElementById('text')! as HTMLInputElement)?.value
        return {
          name,
          email,
          text,
        }
      }
      if (isThinkingtRef.current) return
      setIsThinking(true)
      const { name, email, text } = fn()
      console.log(`text ==>`, text)
      if (text.trim() !== '') {
        onSend('text', `用户输入:\n${text}\n帮我分析一下输入是否通顺`)
      }
    }

    // 添加清理函数
    return () => {
      console.log(`清理函数==>`)
      overlay.removeEventListener('click', handleClick)
      removeOverlay()
    }
  }, [isThinkingtRef.current]) // 添加activeButton为依赖项

实现思路

创建一个div,将它覆盖到原有的按钮上,并添加点击事件,触发原本方法则使用获取dom,触发点击事件
ok!
相关推荐
艾小码10 分钟前
从入门到精通:JavaScript异步编程避坑指南
前端·javascript
七度光阴;14 分钟前
Web后端登录认证(会话技术)
前端·tlias智能辅助系统
菜鸟una1 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
昔人'3 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静8 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者9 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~9 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge10 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再10 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴10 小时前
Lua 模块的完整入门指南
前端·lua