使用 CTRL + 鼠标中键单击而不是链接重定向启用滚动答案

【问题标题】：Enable scroll with CTRL + middle mouse click instead of link redirection使用 CTRL + 鼠标中键单击而不是链接重定向启用滚动
【发布时间】：2020-07-26 02:40:27
【问题描述】：

有没有办法在同时按下 CTRL（或其他键）时使用鼠标中键（又名鼠标 3）启用滚动；而不是在新标签页中重定向到 href 的默认行为？

https://jsfiddle.net/b7zyx39f/

我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://stackoverflow.com/"><img src="https://via.placeholder.com/800"></a>
    <a href="https://stackoverflow.com/"><img src="https://via.placeholder.com/800"></a>
    <a href="https://stackoverflow.com/"><img src="https://via.placeholder.com/150"></a>
    <a href="https://stackoverflow.com/"><img src="https://via.placeholder.com/150"></a>
    <a href="https://stackoverflow.com/"><img src="https://via.placeholder.com/150"></a>
    <a href="https://stackoverflow.com/"><img src="https://via.placeholder.com/150"></a>
    <a href="https://stackoverflow.com/"><img src="https://via.placeholder.com/150"></a>
    <a href="https://stackoverflow.com/"><img src="https://via.placeholder.com/150"></a>
    <a href="https://stackoverflow.com/"><img src="https://via.placeholder.com/150"></a>
</body>
</html>

【问题讨论】：

标签： javascript html scroll anchor anchor-scroll

【解决方案1】：

您可以使用auxevent (see this) 阻止中键单击并阻止默认操作。但在您的情况下，我建议删除a 标签的href 并为链接添加属性data-href。然后为那些a 标签添加一个点击监听器，它将重定向到所需的链接。一个例子可能是，

<a data-href="https://stackoverflow.com/"><img src="https://via.placeholder.com/800"></a>

在javascript中

document.querySelectorAll("a").forEach(href => {
  href.addEventListener("click", e => {
    window.location.href = href.dataset.href;
  });
});

要捕获 ctrl 按钮，您可以添加另一个事件侦听器，以便在未按下 ctrl 时在中间单击时重定向

href.addEventListener("auxclick", e => {
  if (!window.event.ctrlKey) {
    window.open(href.dataset.href, '_blank');
  }
});

【讨论】：

SO 谴责 cmets 就像感谢，但不得不... 非常感谢，你是个天才！