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

Posted 2023-03-17

【中文标题】委托元素是不是需要获得焦点才能触发键盘事件？

【英文标题】：Does a delegated element need to have focus to fire a keyboard event?委托元素是否需要获得焦点才能触发键盘事件？

【发布时间】：2020-12-09 15:23:02

【问题描述】：

下面的键盘处理程序赋值语句，当用户在任何指定的 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>

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

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

如何让 td 元素“监听”Escape 键盘事件？

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

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

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

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

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

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

所以，简短的回答是肯定的，元素确实需要有焦点才能触发事件处理函数。因为，在我的例子中，重点是表格，而不是 td 元素，所以单个 td 元素可能不需要在事件处理函数赋值语句中，但是当我实现移动使用箭头键在 td 元素之间突出显示。

谢谢。

【参考方案1】：

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