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

如何解决委托元素是否需要具有焦点才能触发键盘事件？

下面的键盘处理程序分配语句，当用户在任何指定的textarea元素中按Escape键时正确触发匿名函数，但在表中显示包含td元素的情况下也正确触发匿名函数： / p>

$( '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 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>

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

表或其td元素是否缺少焦点是按下Escape键时未调用该函数的原因？

如何使td元素“监听”退出键盘事件？

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

顺便说一句，当它起作用时，我想使用箭头键扩展功能以支持。

请注意，我使用的是表格来模拟select元素，因为使用select嵌套在列表中的其他元素之中时，在某些浏览器中奇怪地显示了select元素，更重要的是，单击已选择的选项不会导致选择被重新选择并关闭“下拉列表”。使用模拟选择的表格，单击任何td（选项）元素都会选择它并关闭“下拉列表”，而不管该选项先前是否被选中。

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

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

，包括表和td元素。然后，在显示表的代码中，添加了一条语句，重点放在要显示的表上。

因此，简短的答案是“是”，该元素确实需要具有焦点才能触发事件处理程序功能。由于在我的案例中，重点放在表上，而不是td元素上，因此事件处理程序函数赋值语句中可能不需要单个td元素，但是当实现移动菜单项时，我可能会需要它们使用箭头键突出显示td元素之间。

谢谢。

解决方法

是的，该元素确实需要具有焦点，以便键盘事件keydown和keypress触发。