如何确定触发Foundation AlertBox关闭事件的具体按钮？

阿华AIGC实验室

2026-5-29

解决Foundation Alert多关闭按钮的触发源识别问题

这个场景我太熟悉了——Foundation的alert组件默认的close.fndtn.alert事件确实不会直接告诉你是哪个按钮触发的关闭，但我们完全可以在不修改框架源码的前提下搞定，还能完美保留所有原生的过渡动画和UI行为。下面给你两种可行的方案：

方案一：通过自定义数据属性+预存触发元素（最稳妥）

1. 给HTML按钮加自定义标识

我们可以给每个关闭按钮加上data-action属性来明确区分作用，相比直接用class，data属性的语义更清晰：

<div data-alert class="alert-box cookies-consent">
  <div class="informative-text"> Using cookies... </div>
  <div class="close-buttons">
    <a href="#" class="close sure" data-action="accept-cookies">Sure</a>
    <a href="#" class="close opt-out" data-action="reject-cookies">Opt Out</a>
  </div>
</div>

2. JavaScript逻辑处理

先监听按钮的点击事件，把触发按钮临时存到对应的alert容器上，再在Foundation的close事件里读取这个临时数据：

// 第一步：拦截关闭按钮点击，存储触发元素
$('.alert-box .close').on('click', function(e) {
  // 找到当前按钮所属的alert容器
  const parentAlert = $(this).closest('[data-alert]');
  // 将触发按钮存入alert的自定义数据中
  parentAlert.data('triggeredBy', $(this));
});

// 第二步：监听Foundation的close事件，获取触发源
$(document).on('close.fndtn.alert', function(event) {
  const alertElement = $(event.target);
  const triggerButton = alertElement.data('triggeredBy');

  if (triggerButton) {
    // 根据data-action判断按钮类型
    const action = triggerButton.data('action');
    switch(action) {
      case 'accept-cookies':
        console.log('用户同意了Cookie政策');
        // 这里可以添加同意后的业务逻辑，比如设置Cookie
        break;
      case 'reject-cookies':
        console.log('用户拒绝了Cookie政策');
        // 添加拒绝后的业务逻辑
        break;
    }
    // 用完清除临时数据，避免下次触发时拿到旧值
    alertElement.removeData('triggeredBy');
  }

  // 保留你原有的日志逻辑
  console.info('An alert box has been closed!');
  console.info(event);
});

方案二：通过原生事件追溯触发元素（无需修改HTML）

如果不想改动HTML，我们可以利用自定义事件的originalEvent属性，追溯到最初触发关闭的原生点击事件，从而找到对应的按钮：

$(document).on('close.fndtn.alert', function(event) {
  let triggerButton = null;

  // Foundation的close事件是自定义事件，originalEvent指向触发它的原生click事件
  if (event.originalEvent) {
    // 找到事件触发目标，若目标是按钮内部子元素，向上查找.close类元素
    triggerButton = $(event.originalEvent.target).closest('.close');
  }

  if (triggerButton.length) {
    // 通过现有class判断按钮
    if (triggerButton.hasClass('sure')) {
      console.log('点击了「Sure」按钮');
    } else if (triggerButton.hasClass('opt-out')) {
      console.log('点击了「Opt Out」按钮');
    }
  }

  console.info('An alert box has been closed!');
  console.info(event);
});