javascript - 按下鼠标时将键盘滚动事件从一个元素转发到另一个元素

Question

我正在开发一个具有侧面板和主时间轴 View 的应用程序。用户能够从侧面板中选择一个项目并将其拖到时间线 View 中。

要拖动项目，用户按住鼠标左键，然后将项目拖动到时间线 View 。用户现在应该能够使用箭头键上下滚动时间线，但是当按下这些按钮时，侧面板会滚动。在鼠标按下时，我尝试将焦点设置到时间线元素，但这不起作用。

onMouseDown = () => {
  ...
  document.getElementById('timeLine').focus() // does not change the focus to the timeline
}

是否可以在按住鼠标按钮时强制浏览器改变焦点？我当前的修复是使用 jQuery 强制动画滚动时间线 View ，但这会导致动画与真实的浏览器滚动事件相比相当慢。

Answer 1

只能聚焦某些 HTML 元素，例如非禁用输入、iFrame、非禁用按钮和具有 href 属性的 anchor (链接)。

要允许其他元素获得焦点，您必须为它们提供制表符索引。要让浏览器自动计算正确的 tabindex，您应该在时间轴元素的 html 中使用 tabindex = 0。这应该可以解决您的问题。

这里是一个快速组合的示例。如果删除 tabindex = 0 那么您会注意到 jQuery focus 命令停止工作 https://codepen.io/kaisalmon/pen/BaNVmbL

编辑:如果您使用 mousedown (但不是 click 或 mouseup)，也会阻止事件的默认操作:

    $('#timeline').focus();
    e.preventDefault();