按下向下箭头键时，单击事件被触发。

Question

在按下下箭头键时，会触发点击事件，但是事件的keycode属性未定义。

$(".dropdown:not(.li-search) a.dropdown-toggle", ".navbar-collapse").on("click", function(event) {

    var target = $(this).attr("target");

    if (event.keyCode !== '40'){
      if (!$(".li-menu").is(":visible") && target === undefined) {
        location.href=this.href;
      } else {
        window.open(this.href, '_blank');
      }
    }
});

在这段代码中，我试图在新标签页中打开主菜单，但是在按下向下箭头键时，外部链接会被打开。

- Satvik Purohit

---

请添加您的HTML代码，并提及您正在使用哪些插件？ - n4m31ess_c0d3r

Answer 1

调用preventDefault()函数。

    $(".dropdown:not(.li-search) a.dropdown-toggle", ".navbar-collapse").on("click", function(event) {
    event.preventDefault();
    var target = $(this).attr("target");
    if(event.keyCode!=='40'){
     if (!$(".li-menu").is(":visible") && target===undefined) {
       location.href=this.href;
    }
        else {
     window.open(this.href,'_blank');
     }
     }
});

请参考https://css-tricks.com/snippets/javascript/javascript-keycodes/获取按键码，以便为特定的按键事件配置您的应用程序

- spyshiv

Answer 2

看到 dropdown-toggle 和 navbar-collapse 这两个类，我猜想你正在使用 Bootstrap 库。

如果是这样的话，你所观察到的行为是合理的。让我们分析一下问题：

1. 按下向下箭头键时，点击事件会触发

   问题：你只绑定了click事件的处理程序，为什么它会在keypress上触发？ 答案：因为这是bootstrap下拉菜单的一个功能。为了更好的可访问性，bootstrap会在按下up、down、esc和space键的keydown上触发click事件。

2. event.keycode未定义

   由于它是一个click事件处理程序，而不是像keydown或keypress那样的键盘事件处理程序，所以event.keyCode应该是undefined

3. 注意：您在以下条件中使用了严格相等

   if (event.keyCode !== '40')

   这将检查操作数的类型和值。现在，event.keyCode总是返回一个Number，而'40'是一个字符串，因此上述条件即使keyCode为40也会产生false。您应该将其更正为：

   if (event.keyCode !== 40)

4. 现在，如果您想停止向下键的重定向，您应该检查触发事件是原始事件还是由一些js逻辑触发的。为此，您可以选择jQuery的event.isTrigger或event.originalEvent

这里是一段代码片段：

$(".dropdown:not(.li-search) a.dropdown-toggle", ".navbar-collapse").on("click", function(event) {
    var target = $(this).attr("target");
    // Check if NOT an triggered event
    if (!event.isTrigger) {
        if (!$(".li-menu").is(":visible") && target === undefined) {
            location.href = this.href;
        } else {
            window.open(this.href, '_blank');
        }
    }
});

- n4m31ess_c0d3r

---

非常感谢你，伙计， 如果（！event.isTrigger）有效， 我喜欢你回答我的问题的方式。谢谢你。 - Satvik Purohit

Answer 3

<a>标签在按下回车键时会触发点击事件。但是，由于它不是Key*事件，因此事件上将没有keyCode。如果您想知道keyCode，请添加keyDown或keyUp处理程序。您也可以通过以下方式同时处理两者：

$(".dropdown:not(.li-search) a.dropdown-toggle", ".navbar-collapse").on("click keydown", function(event) {

    var target = $(this).attr("target");
    if(event.type === 'keydown' && event.keyCode!=='40'){
       if (!$(".li-menu").is(":visible") && target===undefined) {
           location.href=this.href;
       }
       else {
           window.open(this.href,'_blank');
       }
   }
});

如果您希望防止默认浏览器行为发生，那么您可能还需要在其中添加一个 event.preventDefault();。

- JVDL