委托元素是否需要焦点才能触发键盘事件？

Question

下面的键盘处理程序赋值语句，当用户在任何指定的 textarea 元素中按下 Escape 键时，它会正确触发匿名函数，但当 table 显示包含 td 元素时则不会，此语句中指定：

$( 'div.your-videos' )
.on( 'keydown keypress',
'textarea.webvideourlURI, ' +
'textarea.webvideourlPicture, ' +
'textarea.webvideourlTitle, ' +
'textarea.webvideourlDescription, ' +
'td[name="ytPictureSelect"]',
function( event ) {
  const RETURN = 13;
  const TAB = 9;
  const ESCAPE = 27;

  var value = true;

  if( event.keyCode === ESCAPE ) {

    event.preventDefault(); // cancel default actions
    value = false;
    webvideourlTextarea_Blur( event );

  }
  else if( ( event.keyCode === TAB ) || ( event.keyCode === RETURN ) ) {

    event.preventDefault(); // cancel default actions
    value = false;
    event.target.blur();

  } // if( event.keyCode === ESCAPE ) ...
    // else if( ( event.keyCode === TAB ) || ( event.keyCode === RETURN ) ) ...

  return( value );
} ); // End of anonymous keydown/keypress handler function.

这里是 table 定义：

<table id="ytPictureSelect" tabindex="0"
       style="display: inline-block; position: relative; z-index: 9000; box-shadow: 3px 3px grey;" 
       title="Select a YouTube image or Other." size="12" selectedindex="5">
  <tbody>
    <tr><td name="ytPictureSelect" value="not set" youtube="no" title="Not set">Not set</td></tr>
    <tr><td name="ytPictureSelect" value="maxresdefault" youtube="yes" title="Maximum Resolution">Max Res</td></tr>
    <tr><td name="ytPictureSelect" value="sddefault" youtube="yes" title="Standard Definition">Std-Def</td></tr>
    <tr><td name="ytPictureSelect" value="hqdefault" youtube="yes" title="High Quality">HQ-Def</td></tr>
    <tr><td name="ytPictureSelect" value="mqdefault" youtube="yes" title="Medium Quality">MQ-Def</td></tr>
    <tr><td name="ytPictureSelect" value="default" youtube="yes" selected="selected" title="Default definition">Default</td></tr>
    <tr><td name="ytPictureSelect" value="0" youtube="yes" title="Alternate image">Alt-1</td></tr>
    <tr><td name="ytPictureSelect" value="1" youtube="yes" title="Alternate image">Alt-2</td></tr>
    <tr><td name="ytPictureSelect" value="2" youtube="yes" title="Alternate image">Alt-3</td></tr>
    <tr><td name="ytPictureSelect" value="3" youtube="yes" title="Alternate image" style="border-bottom: thin solid black;">Alt-4</td></tr>
    <tr><td name="ytPictureSelect" value="Other Webpage" youtube="no" title="Non-YouTube webpage image">Other Webpage</td></tr>
    <tr><td name="ytPictureSelect" value="Local Image File" youtube="no" title="Upload a local image file" disabled="">Local Image File</td></tr>
  </tbody>
</table>

实际上，此 table 有多个副本，您的视频 div 列表中的每个视频项目都有一个副本。 textarea 元素也在同一个列表中多次出现。

是table或其td元素没有焦点导致按下Escape键时没有调用函数的原因吗？

如何使 td 元素 'listen' 成为 Escape 键盘事件？

请注意，我没有将键盘事件直接分配给 td 元素的原因是列表中可能有很多视频，每个视频都有自己的 table，包含 12 个 td 元素，所以是可能最好使用委托 keydown/keypress 键盘事件处理程序。

顺便说一句，当这个工作正常时，我想扩展功能以支持使用箭头键。

请注意，我使用 table 来模拟 select 元素，因为当 select 嵌套在列表中的其他元素中时，它在某些浏览器中显示异常而且，更重要的是，单击已经 select 编辑的选项不会导致 select 被重新select 编辑并关闭 'drop-down-list'。使用 table 模拟 select，单击任何 td（选项）元素都会 select 它并关闭 'drop-down-list'，该选项之前是否 selected与否。

更新： 我修改了事件处理函数赋值语句中的元素列表，将 'td[name="ytPictureSelect"]', 替换为

 'table#ytPictureSelect, ' +
 'table#ytPictureSelect>tbody>tr>td',

其中包括 table 和 td 元素。然后在显示 table 的代码中，我添加了一个语句，重点关注正在显示的 table。

所以，简短的回答是肯定的，元素确实需要有焦点才能触发事件处理函数。因为，在我的例子中，重点是 table，而不是 td 元素，所以 individual td 元素可能不需要在事件处理程序函数赋值语句中，但我会当我使用箭头键在 td 元素之间移动高亮时，可能会需要它们。

谢谢。

Answer 1

是的，该元素确实需要获得焦点才能触发键盘事件 keydown 和 keypress。

委托元素是否需要焦点才能触发键盘事件？

Does a delegated element need to have focus to fire a keyboard event?

javascript

keyboard

jquery

delegates

event-handling