时间戳

首页 > 解决方案 > 委托元素是否需要获得焦点才能触发键盘事件？

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

问题描述

下面的键盘处理程序分配语句，当用户在任何指定的 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 元素之间突出显示。

谢谢你。

标签： javascriptjquerykeyboardevent-handlingdelegates

解决方案

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

推荐阅读