如何实现按键事件目标为选中元素的选择辅助工具？

Got it, let's build out the rest of this selection helper tool for you! Since you already have click-to-select working, here's how to add direction key navigation and hotkey interaction that targets the selected element instead of the body:

First, we need a way to keep track of which element is currently selected. Let's add a global variable (or use a class property if you're using OOP) and a CSS class for visual feedback:

// Track the currently selected element
let currentSelectedEl = null;

// Update your existing click-to-select logic to set this variable
document.addEventListener('click', (e) => {
  const target = e.target.closest('.selectable'); // Use your selector for selectable elements
  if (!target) return;

  // Deselect previous element if exists
  if (currentSelectedEl) {
    currentSelectedEl.classList.remove('selected');
  }

  // Select new element
  currentSelectedEl = target;
  currentSelectedEl.classList.add('selected');
  currentSelectedEl.focus(); // Optional: For screen reader accessibility
});

Add this CSS for clear visual feedback:

.selectable {
  padding: 0.5rem;
  margin: 0.25rem;
  border: 1px solid #ddd;
  cursor: pointer;
}

.selectable.selected {
  border-color: #2563eb;
  background-color: #eff6ff;
  outline: 2px solid rgba(37, 99, 235, 0.2);
}

Next, listen for arrow key presses to switch between selectable elements. We'll handle wrapping around when reaching the first/last element:

document.addEventListener('keydown', (e) => {
  const selectableEls = Array.from(document.querySelectorAll('.selectable'));
  if (selectableEls.length === 0) return;

  // If no element is selected yet, default to the first one on key press
  if (!currentSelectedEl) {
    currentSelectedEl = selectableEls[0];
    currentSelectedEl.classList.add('selected');
    currentSelectedEl.focus();
    return;
  }

  const currentIndex = selectableEls.indexOf(currentSelectedEl);
  let newIndex;

  switch(e.key) {
    case 'ArrowUp':
    case 'ArrowLeft':
      newIndex = currentIndex > 0 ? currentIndex - 1 : selectableEls.length - 1; // Wrap to last
      break;
    case 'ArrowDown':
    case 'ArrowRight':
      newIndex = currentIndex < selectableEls.length - 1 ? currentIndex + 1 : 0; // Wrap to first
      break;
    default:
      return; // Ignore non-direction keys
  }

  // Update selection state
  currentSelectedEl.classList.remove('selected');
  currentSelectedEl = selectableEls[newIndex];
  currentSelectedEl.classList.add('selected');
  currentSelectedEl.focus();
  // Optional: Smooth scroll to element if it's off-screen
  currentSelectedEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});

Now make sure hotkeys target the selected element instead of the body. We'll check for your custom hotkeys in the same keydown listener, and trigger actions directly on the selected element:

// Add this inside the existing keydown listener (after direction key handling)
if (currentSelectedEl) {
  // Example 1: Ctrl+Enter to trigger an action on the selected element
  if (e.ctrlKey && e.key === 'Enter') {
    e.preventDefault(); // Block default browser behavior (like new line)
    // Dispatch a custom event so you can listen for it on specific elements
    const hotkeyEvent = new CustomEvent('hotkey-interaction', { 
      detail: { action: 'activate' } 
    });
    currentSelectedEl.dispatchEvent(hotkeyEvent);
    
    // Or run your logic directly here:
    // console.log(`Activating element: ${currentSelectedEl.textContent}`);
  }

  // Example 2: Press 'Del' to remove the selected element
  if (e.key === 'Delete') {
    e.preventDefault();
    const index = selectableEls.indexOf(currentSelectedEl);
    currentSelectedEl.remove();
    // Select the next element (or previous if last was deleted)
    currentSelectedEl = selectableEls[index + 1] || selectableEls[index - 1] || null;
    if (currentSelectedEl) {
      currentSelectedEl.classList.add('selected');
      currentSelectedEl.focus();
    }
  }
}

If you want individual elements to handle hotkeys differently, you can listen for the custom event on them:

// Example for a specific selectable element
document.querySelector('#specific-element').addEventListener('hotkey-interaction', (e) => {
  if (e.detail.action === 'activate') {
    // Do something unique for this element
    console.log('Special activation for this element!');
  }
});

• If you're adding selectable elements dynamically, make sure to re-fetch the selectableEls collection when new elements are added, or use event delegation for clicks.
• For accessibility, add tabindex="0" to non-focusable elements (like divs) so they can receive focus when selected.

内容的提问来源于stack exchange，提问作者YakovL