Wix/Velo：如何阻止链接跳转且不修改href属性？

针对Wix平台的特性，常规e.preventDefault()无法阻止<a>标签跳转的问题，提供以下几个可行的解决思路：

方案1：修改href为伪协议javascript:void(0) #

直接将<a>标签的href设置为javascript:void(0)，从根源上避免跳转行为，再配合Wix的onClick处理器执行自定义逻辑。

示例代码：

<a href="javascript:void(0)" id="customLink">Click here</a>

Wix代码面板中的逻辑：

$w('#customLink').onClick(() => {
  // 执行自定义操作：比如添加iframe到DOM
  const iframe = document.createElement('iframe');
  iframe.src = 'https://www.example.com';
  iframe.style.width = '100%';
  iframe.style.height = '500px';
  document.body.appendChild(iframe);
});

javascript:void(0)是无意义的伪协议，点击后不会触发页面跳转，同时不影响Wix事件处理器执行自定义逻辑。

方案2：获取原生DOM事件阻止跳转 #

如果需要保留原href属性（比如SEO需求），可以在Wix的onClick事件中获取原生DOM事件，调用原生的preventDefault()和stopPropagation()方法：

$w('#customLink').onClick((wixEvent) => {
  // 获取原生点击事件对象
  const nativeEvent = wixEvent.nativeEvent;
  if (nativeEvent) {
    nativeEvent.preventDefault();
    nativeEvent.stopPropagation();
  }
  // 执行自定义操作
  // ...
});

注意：部分Wix组件的事件封装可能不会暴露nativeEvent，需要测试确认可用性。

方案3：替换为Wix Button组件 #

既然修改href为空时Wix会自动将<a>转为<button>，不如直接使用Wix自带的Button组件，完全规避<a>标签的跳转行为：

1. 在Wix编辑器中拖入Button组件，设置显示文案为"Click here"
2. 在代码面板中绑定点击事件：

$w('#customButton').onClick(() => {
  // 执行自定义操作：比如打开iframe
  // ...
});

这种方式逻辑更直接，无需处理<a>标签的默认行为问题。

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