如何重写不可修改元素的点击函数，添加确认逻辑并恢复原函数？

场景说明 #

存在无法直接修改的页面元素（原需求提及iframe内按钮，实际为不可编辑内容），这些元素是同一类名的按钮，点击会触发页面跳转；外部有用户数据表单，需跟踪未保存的更改。需求为：当用户有未保存更改时，点击这些按钮会弹出确认提示**"You have unsaved changes, are you sure you want to discard them?"**，用户确认后执行原跳转逻辑，取消则终止。

用户尝试的实现方案 #

方案一：重写元素onclick函数 #

在React的useEffect中获取目标元素，保存原onclick函数，重写onclick添加确认逻辑，并考虑在卸载时恢复原函数，代码如下：

useEffect(()=>{
   const elements = document.getElementsByClassname("classname");
   for (let element of elements){
      const originalFunction = element.onclick // <--
      element.onclick = () => {
         if (blocked) {
            confirmation({
               content: "You have unsaved changes, are you sure you want to discard them?",
               proceed: "Discard changes",
               cancel: "Cancel",
               handler: function () {
                  discardChanges();
                  originalFunction(); // <--
               }
            });
         } else {
             originalFunction(); // <--
         }
      }
   }
   return ()=>{
      restoreOriginalFunctionDefinitions(); // <--
   }
},[]);

用户提出三个疑问：

1. 如何正确在原有函数逻辑前添加自定义拦截逻辑？
2. 是否可以在元素卸载时恢复原函数定义？
3. 是否存在更优的实现方式？

方案二：使用AdviceFunction封装拦截逻辑 #

实际运行时，仅执行原点击函数，AdviceFunction内的日志未触发，代码如下：

useEffect代码：

useEffect(()=>{
    const elements = Array.from(document.getElementsByClassName(watchingClassName));
    console.info("elements", elements);
    elements.forEach((element)=>{
        const htmlElement = element as HTMLElement;
        AdviceFunction(htmlElement.click, blocking, "Are you sure", "Discard",onDiscard,"Cancel" );
    });
}, [])

AdviceFunction定义：

const AdviceFunction = (
    originalFunction,
    blocked,
    message,
    discardCaption,
    discardAction,
    cancelCaption
) =>
    function (...args) {
        console.info("advice", { this: this, originalFunction, blocked });
        if (blocked) {
            confirmation({
                content: message,
                proceed: discardCaption,
                cancel: cancelCaption,
                handler: function () {
                    discardChanges(discardAction);
                    originalFunction.apply(this, args);
                }
            });
        } else {
            originalFunction.apply(this, args);
        }
    };

实际结果：useEffect成功获取到按钮元素，但点击按钮时仅执行原函数，AdviceFunction内的console.info未输出。

问题解答 #

针对方案一的疑问解答 #

1. 正确添加拦截逻辑的方式

方案一核心思路可行，但需修正几个细节：

• 拼写错误：document.getElementsByClassname应改为document.getElementsByClassName
• 部分元素的点击逻辑可能通过addEventListener绑定，而非直接赋值onclick，此时element.onclick会返回null，需额外处理这类情况
• 调用原函数时要保留上下文与参数，箭头函数会丢失this，建议改用普通函数：

  element.onclick = function(...args) {
    if (blocked) {
      confirmation({
        content: "You have unsaved changes, are you sure you want to discard them?",
        proceed: "Discard changes",
        cancel: "Cancel",
        handler: () => {
          discardChanges();
          originalFunction?.apply(this, args);
        }
      });
    } else {
      originalFunction?.apply(this, args);
    }
  };
  

2. 元素卸载时恢复原函数定义

完全可以实现，只需在useEffect中存储每个元素的原函数，在清理阶段遍历恢复：

useEffect(()=>{
  const elements = Array.from(document.getElementsByClassName("classname"));
  // 用Map存储每个元素对应的原onclick函数
  const originalHandlers = new Map();
  elements.forEach(element => {
    originalHandlers.set(element, element.onclick);
    // 重写onclick逻辑...
  });

  return () => {
    // 遍历恢复原函数
    originalHandlers.forEach((originalFn, element) => {
      element.onclick = originalFn;
    });
  };
}, [blocked]); // 依赖项需加入blocked，状态变化时重新绑定逻辑

若目标按钮是动态渲染的，还需配合MutationObserver监听元素变化，确保新添加的按钮也能被拦截。

3. 更优的实现方式

推荐使用事件委托，无需逐个绑定元素，仅在父级（如document）上监听点击事件，判断目标元素是否为目标类名的按钮：

useEffect(()=>{
  const handleClick = (e) => {
    const targetBtn = e.target.closest(".classname");
    if (targetBtn && blocked) {
      e.preventDefault();
      e.stopPropagation();
      confirmation({
        content: "You have unsaved changes, are you sure you want to discard them?",
        proceed: "Discard changes",
        cancel: "Cancel",
        handler: () => {
          discardChanges();
          // 手动触发原跳转逻辑
          targetBtn.click();
        }
      });
    }
  };

  document.addEventListener("click", handleClick);
  return () => {
    document.removeEventListener("click", handleClick);
  };
}, [blocked]);

这种方式的优势：

• 自动覆盖动态新增的按钮，无需手动重新绑定
• 无需保存和恢复每个元素的原函数，逻辑更简洁
• 避免逐个绑定可能引发的内存泄漏问题

方案二失效的原因 #

方案二的问题在于：你仅调用AdviceFunction生成了包装函数，但并未将该函数赋值给元素的点击事件。需将生成的函数替换原有的click方法，或绑定到元素的点击事件上：

elements.forEach((element)=>{
  const htmlElement = element as HTMLElement;
  // 保存原click方法
  const originalClick = htmlElement.click;
  // 替换为包装后的函数
  htmlElement.click = AdviceFunction(originalClick, blocking, "Are you sure", "Discard", onDiscard, "Cancel");
});

不过这种方式仍有局限：部分元素的点击逻辑可能绑定在click事件监听器上，而非依赖element.click()触发，因此事件委托仍是更稳妥的方案。

内容的提问来源于stack exchange，提问作者Benjamin Griggs