使用 CTRL + 鼠标中键单击启用滚动而不是 link 重定向

Question

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

我的代码

<!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://whosebug.com/"><img src="https://via.placeholder.com/800"></a>
    <a href="https://whosebug.com/"><img src="https://via.placeholder.com/800"></a>
    <a href="https://whosebug.com/"><img src="https://via.placeholder.com/150"></a>
    <a href="https://whosebug.com/"><img src="https://via.placeholder.com/150"></a>
    <a href="https://whosebug.com/"><img src="https://via.placeholder.com/150"></a>
    <a href="https://whosebug.com/"><img src="https://via.placeholder.com/150"></a>
    <a href="https://whosebug.com/"><img src="https://via.placeholder.com/150"></a>
    <a href="https://whosebug.com/"><img src="https://via.placeholder.com/150"></a>
    <a href="https://whosebug.com/"><img src="https://via.placeholder.com/150"></a>
</body>
</html>

Answer 1

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

<a data-href="https://whosebug.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');
  }
});

使用 CTRL + 鼠标中键单击启用滚动而不是 link 重定向

Enable scroll with CTRL + middle mouse click instead of link redirection

javascript

html

scroll

anchor

anchor-scroll