WordPress中让JS实现的可点击Div支持Ctrl/CMD键新开标签

我来帮你搞定这个问题！你的代码目前的问题是：不管用户有没有按下Ctrl（Windows）或Command（Mac）键，都直接用window.location在当前标签页跳转，完全忽略了浏览器的默认修饰键行为。咱们可以通过检测点击事件的修饰键状态，来区分处理不同的用户操作：

修改后的代码 #

<script type="text/javascript">
jQuery(function($){
  $(".entire-div-products-led-sign-link").click(function(event) {
    const $link = $(this).find("a");
    const href = $link.attr("href");
    
    // 空链接直接返回，避免报错
    if (!href) return;

    // 处理三种场景：Ctrl键点击、Command键点击、鼠标中键点击
    if (event.ctrlKey || event.metaKey || event.button === 1) {
      // 触发内部a标签的原生点击事件，让浏览器按默认逻辑处理（打开新标签/窗口）
      $link.get(0).click();
    } else {
      // 普通点击，在当前标签页跳转
      window.location = href;
      return false;
    }
  });
});
</script>

代码说明 #

• 修饰键检测：event.ctrlKey对应Windows的Ctrl键，event.metaKey对应Mac的Command键，两者满足其一就判定为需要打开新标签。
• 鼠标中键支持：额外加入event.button === 1的判断，让用户用鼠标中键点击div时也能打开新标签，更符合日常浏览习惯。
• 原生事件触发：当需要打开新标签时，我们直接触发内部a标签的原生点击事件，而不是手动调用window.open，这样能完全遵循浏览器的默认行为（比如用户设置的“新标签页在后台打开”等偏好）。
• 普通点击处理：没有修饰键的情况下，依然保持原逻辑在当前标签页跳转，并用return false阻止事件冒泡，避免不必要的冲突。

这样修改后，用户既能正常点击div跳转，也能通过Ctrl/Command键或鼠标中键打开新标签啦！

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