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

Question

下面的键盘处理程序赋值语句在用户在任何指定的textarea元素中按Escape键时正确地触发匿名函数，但当表显示包含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 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>

实际上，这个表有几份拷贝，在你的视频div列表中，每个视频项目都有一个拷贝。textarea元素也会在同一列表中多次出现。

表或它的td元素缺少焦点是为什么在按住Escape键时函数没有被调用的原因吗？

如何使td元素“侦听”Escape键盘事件？

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

顺便说一句，当这起作用时，我想扩展函数以支持使用箭头键。

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

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

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

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

因此，简单地说，是的，元素需要有焦点才能触发事件处理程序函数。因为在我的例子中，焦点放在表上，而不是td元素，那么单个td元素可能不需要在事件处理程序函数赋值语句中，但是当我使用箭头键实现在td元素之间移动突出显示时，我可能会需要它们。

谢谢。

Answer 1

是的，元素确实需要有焦点，这样键盘事件、按键和按键就会启动。