如何在Wix平台无需HTML DOM对象检测嵌入事件日历的链接点击事件

原有方案失效原因 #

你之前的两种写法都属于直接操作DOM的逻辑，Wix Velo运行在独立沙箱环境中，没有页面原生DOM的访问权限，jQuery选择器、原生getElementById等DOM操作方法都会直接失效。

可行解决方案 #

场景1：使用Wix官方事件日历组件 #

直接通过Velo自带的组件事件API绑定点击监听即可：

1. 首先在Wix编辑器中选中你的日历组件，设置唯一ID（例如eventCalendar1）
2. 在页面代码中添加如下逻辑：

$w.onReady(function () {
  // 绑定日历条目点击事件
  $w('#eventCalendar1').onItemClick((event) => {
    const clickedEventData = event.item;
    console.log('日历条目被点击', clickedEventData);
    // 如需判断链接点击，可读取事件数据内的链接字段
    if (clickedEventData.link) {
      console.log('点击的链接地址：', clickedEventData.link);
      // 此处添加你的自定义逻辑
    }
  })
});

场景2：嵌入第三方日历使用HTML组件 #

需通过postMessage实现HTML组件内部和Velo层的跨上下文通信：

1. 打开HTML组件的代码编辑面板，在原有第三方日历嵌入代码末尾添加如下监听逻辑：

<script>
// 监听日历内所有链接的点击事件
document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', (e) => {
    // 将点击信息发送到Velo层
    window.parent.postMessage({
      eventType: 'calendarLinkClick',
      url: e.target.href,
      text: e.target.textContent
    }, '*');
  })
})
</script>

2. 在页面Velo代码中添加消息监听逻辑，假设你的HTML组件ID为htmlCalendar：

$w.onReady(function () {
  $w('#htmlCalendar').onMessage((receiveEvent) => {
    if (receiveEvent.data.eventType === 'calendarLinkClick') {
      const clickUrl = receiveEvent.data.url;
      console.log('日历链接被点击：', clickUrl);
      // 此处添加你的自定义逻辑
    }
  })
});

内容的提问来源于stack exchange，提问作者Noob-Dev95