javascript - jQuery 选择器没有触发我的图像图标上的单击事件

Question

我有各种各样的 div，每个都有相同的下拉菜单。当我的事件元素位于其中一个图像图标(V 形向下)上时，我试图模仿单击事件。唯一的问题是，当函数启动时，它什么也不做？

HTML:

<div class="appExperience small-tile">
<div class="blue-bar">
<h2 class="tile-header">APPLICATION EXPERIENCE</h2>
<span class="dropdown hidden-xs">
<i class="tcm-chevron glyphicon glyphicon-chevron-down expand-icon dropdown-toggle"
   role="button"
   aria-labledby="Expand Application Experience Summary Dropdown Menu"
   ng-src="{{dropdown_appExperience}}"
   data-toggle="dropdown"
   tabindex="0"
   alt="Expand Application Experience Summary Dropdown Menu"></i>
<ul class="dropdown-menu appExperience tileContextMenu">
    <li>
   List Item 1
    </li>
    <li>
   List Item 2
    </li>
     ...

我尝试过:

$(window).on("keydown", function() {

            console.log(document.activeElement);
            console.log($(".glyphicon-chevron-down")[0]);

                if (document.activeElement === $(".glyphicon-chevron-down")[0])  {

                            console.log("activeElement is recognized!")   

                            $(".glyphicon-chevron-down")[0].focus( function() {
                                $( this ).trigger("click"); 
                        });
                    }
                });

Answer 1

你应该知道

$(window).on("keydown", function() { … });

将注册一个处理程序，该处理程序将在整个页面上的每个键盘操作上触发。如果您想将其限制为 TAB，请考虑检查 event.keyCode === 9或更好 event.key === 'Tab' .

<小时/>

以下代码有一些问题:

if (document.activeElement === $(".glyphicon-chevron-down")[0]) {
   console.log("activeElement is recognized!")   
    $(".glyphicon-chevron-down")[0].focus(function() {
      $( this ).trigger("click"); 
    });
  }
});

1. 正如 @Mike McCaughan 在评论中已经指出的那样，$(selector)[0] 将为您提供一个 HTMLElement，因此您正在调用 HTMLElement.focus() ，而不是jQuery.focus() .
2. 如果注册 focus 事件处理程序成功，您最终会注册一堆处理程序。因为您只添加监听器，但从未删除它们。
3. 此代码检查 .glyphicon-chevron-down 是否为 activeElemnt，如果是的话，它会尝试添加 focus 事件监听器。这是毫无意义的，因为此时该元素已经获得焦点 - 这就是它是 activeElement 的原因。

<小时/>

“模仿点击事件”的目标是什么？