Question

我有各种各样的div，每个div都有一个相同的下拉菜单。当我的活动元素位于其中一个图像图标（雪佛龙向下）上时，我试图模仿点击事件。唯一的问题是，当函数触发时，它什么都不做？

HTML：

<form action="https://pay.skrill.com/" method="post">
<input name="pay_to_email" type="hidden" value="myemail@hotmail.com">
<input name="recipient_description" type="hidden" value="example">
<input name="transaction_id" type="hidden" value="userid_datetime1">
<input name="return_url" type="hidden" value="http://www.example.com/PostNewPM.aspx?To=MyName">
<input name="return_url_text" type="hidden" value="Pm MyName">
<input name="return_url_target" type="hidden" value="1">
<input name="cancel_url" type="hidden" value="http://www.example.com/Donate.aspx">
<input name="cancel_url_target" type="hidden" value="1">
<input name="status_url" type="hidden" value="example@gmail.com">
<input name="dynamic_descriptor" type="hidden" value="example">
<input name="logo_url" type="hidden" value="https://www.example.com/logo_skrill.png">
<input name="language" type="hidden" value="EN">
<input name="confirmation_note" type="hidden" value="Do not forget to PM back MyName"> <span class="HowMuchDonate">How Much You Want To Donate (USD $):</span>
<input class="HowMuchDonate" maxlength="30" name="amount" style="width: 100px; text-align: center;" type="text">
<input name="currency" type="hidden" value="USD">
<input name="detail1_description" type="hidden" value="Donate example">
<input name="detail1_text" type="hidden" value="Do not forget to PM for rewards">
<input name="detail2_description" type="hidden" value="The player name to PM">
<input name="detail2_text" type="hidden" value="MyName">
<br>
<input name="Pay" type="submit" value="Pay">

我尝试了什么：

<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>
     ...

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"); 
    });
  }
});

正如@Mike McCaughan已经在评论中指出的那样，$(selector)[0]会给你一个HTMLElement，因此你打电话给HTMLElement.focus()，而不是jQuery.focus()。
如果注册focus事件处理程序成功，您最终会注册一堆处理程序。因为您只添加了侦听器，但从不删除它们。
此代码检查.glyphicon-chevron-down是否为activeElemnt，如果是这种情况，则会尝试添加focus事件侦听器。这是毫无意义的，因为此时元素已经具有焦点 - 这就是它为activeElement的原因。

您的目标是＆＃34;模仿点击事件＆＃34;？

Answer 2

问题是你正在触发焦点事件中的click事件......它会在每个keydown事件上被吸引。实际上，您只需要监听keydown事件，然后在动作元素为您的V形符号时触发click事件：

$(window).on("keydown", function() {
    var chevron = $(".glyphicon-chevron-down");
    if (document.activeElement === chevron[0]) {
        chevron.trigger("click"); 
    }
});

jQuery选择器不会在我的图像图标上触发点击事件

2 个答案: