如何用PrototypeJS或纯JS拦截点击事件，验证后触发原处理函数？

在PrototypeJS中，直接新增click事件会按绑定顺序执行，若原事件先绑定，新事件会在原事件之后触发，这不符合你的前置验证需求。正确的做法是先暂存原事件处理函数，移除原绑定，再优先绑定验证逻辑，验证通过后手动调用原处理函数，避免循环触发问题。

实现步骤 #

• 提取按钮上已绑定的所有click事件处理函数
• 移除按钮上原有的click事件绑定
• 绑定新的前置验证逻辑：
  • 验证不通过时，阻止事件默认行为、停止传播
  • 验证通过时，逐一调用之前暂存的原事件处理函数

可行代码示例 #

var button = $('onestepcheckout-place-order-button');

// 暂存原有的click事件处理函数（Prototype会把事件存在_element._eventRegistry里）
var originalClickHandlers = [];
if (button._eventRegistry && button._eventRegistry.click) {
  originalClickHandlers = button._eventRegistry.click.slice();
}

// 移除所有原click事件绑定
button.stopObserving('click');

// 绑定前置验证逻辑
button.observe('click', function(event) {
  if (confirm('Are you sure?') === false) {
    console.log('The order should not be submitted');
    event.preventDefault();
    event.stopPropagation();
    return false;
  }

  // 验证通过，调用所有原事件处理函数
  originalClickHandlers.forEach(function(handler) {
    handler.call(button, event);
  });
});

代码说明 #

• 利用Prototype内部的_eventRegistry属性获取已绑定的事件处理函数（Prototype 1.7.x版本可用）
• 调用stopObserving('click')清空原绑定，确保验证逻辑先执行
• 验证通过后，通过forEach遍历调用原处理函数，保持原逻辑的上下文和事件参数传递

内容的提问来源于stack exchange，提问作者Ricardo Martins