Safari - 按箭头键导航画廊时出现错误声音答案

【问题标题】：Safari - Error sound when pressing arrow keys to navigate gallerySafari - 按箭头键导航画廊时出现错误声音
【发布时间】：2019-08-30 11:57:05
【问题描述】：

我的网站上有一个图片库，我可以使用左右箭头键来导航它。 Chrome 在按向左或向右箭头键时不会发出声音，但 Safari 会发出声音。听起来像是错误的声音。

我注释掉了移动到下一张/上一张图像的代码，声音仍然出现。这意味着不是因为我的代码有声音。我正在使用 jquery 来检测按键。

$(document).keyup(function(e) {
  switch(e.which) {
      case 37: // left
        $(".gallery-nav-left").click();
      break;

      case 39: // right
        $(".gallery-nav-right").click();
      break;

      default: return;
  }
});

为什么这只发生在 Safari 中？

【问题讨论】：

尝试在末尾添加return false;。它将阻止默认浏览器行为。箭头是用来滚动窗口的，所以当页面底部没有滚动条时，Safari似乎会发出错误声音。
那行不通。我也试过 e.preventDefault() 但声音还是响了。
我意识到你正在使用keyup，尝试keydown而不是keyup，你不能阻止keyup中的行为，因为它是在本机行为之后调用的。
成功了！您能否将其发布在单独的答案中，以便我接受。

标签： javascript jquery macos safari

【解决方案1】：

Safari 浏览器在按箭头时似乎会发出声音错误，这可能是因为没有水平滚动条。本机浏览器动作是在箭头上滚动窗口。当焦点中没有输入元素时会发生这种情况。

在您的情况下，您希望阻止默认浏览器行为，但为此您需要 keydown 事件，因为在默认浏览器操作之后调用 keyup，因此您无法使用 keyup 阻止它：

$(document).keydown(function(e) { // you need keydown
  switch(e.which) {
      case 37: // left
        $(".gallery-nav-left").click();
      break;

      case 39: // right
        $(".gallery-nav-right").click();
      break;

      default: return;
  }
  return false; // or e.preventDefault() - on document it will be the same
});

【讨论】：