如何实现中键点击聚焦YouTube搜索建议项？

你需要注意的是，YouTube的搜索建议项是动态生成的，页面初始加载时并不存在，所以不能像绑定搜索图标那样直接获取元素绑定事件，得用事件委托来处理。

下面是整合了原有功能，同时新增中键点击搜索建议项获焦的代码：

(function() {
    'use strict';

    // 原有：中键点击搜索图标在新标签页打开结果
    var searchIcon = document.getElementById("search-icon-legacy");
    if (searchIcon) {
        searchIcon.addEventListener("mousedown", function(event) {
            event.preventDefault();
            var searchInput = document.getElementsByClassName("ytd-searchbox")[3].value.trim();
            if (event.which === 2 && searchInput) {
                window.open("https://www.youtube.com/results?search_query=" + encodeURIComponent(searchInput), "_blank");
            }
        });
    }

    // 新增：中键点击搜索建议项使其获得焦点
    document.addEventListener("mousedown", function(event) {
        // 找到点击的元素所属的搜索建议项
        const suggestionItem = event.target.closest('ytd-search-suggestion-renderer');
        if (suggestionItem && event.which === 2) {
            event.preventDefault(); // 阻止中键默认打开新标签的行为
            suggestionItem.focus(); // 让建议项获得焦点
        }
    });
})();

关键说明： #

• 用document.addEventListener做事件委托，覆盖动态生成的建议项；
• event.target.closest('ytd-search-suggestion-renderer')用来判断点击的元素是否属于搜索建议项（即使点击的是建议项内的文本或图标，也能找到对应的父级建议元素）；
• event.preventDefault()会取消中键默认的新标签打开行为，确保只有获焦效果生效；
• 如果需要的是将建议项内容填入搜索框并让搜索框获焦，可以把suggestionItem.focus()替换成：

  const searchInput = document.querySelector('input.ytd-searchbox');
  searchInput.value = suggestionItem.querySelector('#query').textContent.trim();
  searchInput.focus();
  

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