Question

上一页：“按钮”为<button type='button'>

摘要：

我有两个相同的按钮。我用鼠标单击＃1。我得到一个点击事件（＃1）。我打了[空格]。我收到一个点击事件。我[按Tab]到按钮＃2。我按[空格]。注意。当我按[tab]返回＃1并按[space]时，将触发click-event（＃1）。

如果我单击＃2（反之亦然），则按钮＃2不会在[空格]按钮1上触发。

鼠标单击始终触发onClick。

预先回答的问题：

是否可以复制：是

取决于浏览器？否（FF，色度和边缘-相同图片）

图书馆？ jQuery

其他脚本：是；质量，但理论上不影响！！

我有解决方法吗？是;如果我听到按键事件并在按键为[space]时单击一下，则一切正常。

确定按钮具有焦点吗？是; ：focus规则处于活动状态，调试器也告诉我

测试按钮是否复杂：否，不是上述按钮。只是<button type="button">aaaa</button>

奖金是<button>，其中<div>覆盖了按钮的一半：如果单击<button>（而不是内部的div），则会得到与上图相同的图像。如果单击<div>内的<button>，则空间甚至不会触发onClick一次。尽管在这两种情况下都会获得焦点，并且会触发鼠标单击。

我敢肯定，某些样式和其他脚本会影响这种行为，但是经过数小时（逐步破坏框架并删除内容）后，我找不到任何原因。

我被困住了-有什么主意（试图找出更多信息）吗？

（具有讽刺意味的部分：我正在研究框架，使其只能与键盘进行交互）

编辑：基于评论：我不发表一个例子，因为问题仍然存在于一个大框架中。我不知道错误发生的位置和原因，所以我不知道共享或摆弄什么代码。我能做的是，发布指向测试页的链接...我可以在这里这样做吗？

编辑：我将按钮直接放在身体下面。看起来像这样-不多：

<body class="ldc responsive-body site_base">
    <button id="test-space" type="button">aaaa</button>
    <button type="button">aaaa</button>
    <div class="prod" id="head-canvas">
            ...

我测试冒泡的代码也非常简单：

    $("#test-space").click((evt) =>
        console.log "click", evt
    )
    $("#test-space").parents().keydown( (evt) =>
        console.log "key down", evt
    ).keyup( (evt) =>
        console.log "key up", evt
    ).keypress( (evt) =>
        console.log "key", evt
    ).click((evt) =>
        console.log "click", evt
    )

按钮通过[tab]成为焦点时的输出：键盘事件在这里-没有单击事件

key down 
Object { originalEvent: keydown, type: "keydown", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: body.ldc.responsive-body.site_base, relatedTarget: undefined, timeStamp: 486711, jQuery32106522351333554319: true, delegateTarget: body.ldc.responsive-body.site_base
, handleObj: {…}, … }
browser_test.coffee:34:26
key down 
Object { originalEvent: keydown, type: "keydown", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: html, relatedTarget: undefined, timeStamp: 486711, jQuery32106522351333554319: true, delegateTarget: html
, handleObj: {…}, … }
browser_test.coffee:34:26
key 
Object { originalEvent: keypress, type: "keypress", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: body.ldc.responsive-body.site_base, relatedTarget: undefined, timeStamp: 486711, jQuery32106522351333554319: true, delegateTarget: body.ldc.responsive-body.site_base
, handleObj: {…}, … }
browser_test.coffee:42:26
key 
Object { originalEvent: keypress, type: "keypress", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: html, relatedTarget: undefined, timeStamp: 486711, jQuery32106522351333554319: true, delegateTarget: html
, handleObj: {…}, … }
browser_test.coffee:42:26
key up 
Object { originalEvent: keyup, type: "keyup", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: body.ldc.responsive-body.site_base, relatedTarget: undefined, timeStamp: 486758, jQuery32106522351333554319: true, delegateTarget: body.ldc.responsive-body.site_base
, handleObj: {…}, … }
browser_test.coffee:38:26
key up 
Object { originalEvent: keyup, type: "keyup", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: html, relatedTarget: undefined, timeStamp: 486758, jQuery32106522351333554319: true, delegateTarget: html, handleObj: {…}, … }

相同的情况-现在只需单击鼠标即可聚焦：（日志中的前3个条目；由于空格命中而导致的单击是跟随键盘事件发生的，如它们应该的那样：

    click 
Object { originalEvent: click, type: "click", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: button#test-space, relatedTarget: null, timeStamp: 1239853, jQuery32106522351333554319: true, delegateTarget: button#test-space
, handleObj: {…}, … }
browser_test.coffee:29:26
click 
Object { originalEvent: click, type: "click", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: body.ldc.responsive-body.site_base, relatedTarget: null, timeStamp: 1239853, jQuery32106522351333554319: true, delegateTarget: body.ldc.responsive-body.site_base
, handleObj: {…}, … }
browser_test.coffee:46:26
click 
Object { originalEvent: click, type: "click", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: html, relatedTarget: null, timeStamp: 1239853, jQuery32106522351333554319: true, delegateTarget: html
, handleObj: {…}, … }
browser_test.coffee:46:26
key down 
Object { originalEvent: keydown, type: "keydown", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: body.ldc.responsive-body.site_base, relatedTarget: undefined, timeStamp: 1246023, jQuery32106522351333554319: true, delegateTarget: body.ldc.responsive-body.site_base
, handleObj: {…}, … }
browser_test.coffee:34:26
key down 
Object { originalEvent: keydown, type: "keydown", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: html, relatedTarget: undefined, timeStamp: 1246023, jQuery32106522351333554319: true, delegateTarget: html
, handleObj: {…}, … }
browser_test.coffee:34:26
key 
Object { originalEvent: keypress, type: "keypress", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: body.ldc.responsive-body.site_base, relatedTarget: undefined, timeStamp: 1246024, jQuery32106522351333554319: true, delegateTarget: body.ldc.responsive-body.site_base
, handleObj: {…}, … }
browser_test.coffee:42:26
key 
Object { originalEvent: keypress, type: "keypress", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: html, relatedTarget: undefined, timeStamp: 1246024, jQuery32106522351333554319: true, delegateTarget: html
, handleObj: {…}, … }
browser_test.coffee:42:26
key up 
Object { originalEvent: keyup, type: "keyup", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: body.ldc.responsive-body.site_base, relatedTarget: undefined, timeStamp: 1246086, jQuery32106522351333554319: true, delegateTarget: body.ldc.responsive-body.site_base
, handleObj: {…}, … }
browser_test.coffee:38:26
key up 
Object { originalEvent: keyup, type: "keyup", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: html, relatedTarget: undefined, timeStamp: 1246086, jQuery32106522351333554319: true, delegateTarget: html
, handleObj: {…}, … }
browser_test.coffee:38:26
click 
Object { originalEvent: click, type: "click", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: button#test-space, relatedTarget: null, timeStamp: 1246147, jQuery32106522351333554319: true, delegateTarget: button#test-space
, handleObj: {…}, … }
browser_test.coffee:29:26
click 
Object { originalEvent: click, type: "click", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: body.ldc.responsive-body.site_base, relatedTarget: null, timeStamp: 1246147, jQuery32106522351333554319: true, delegateTarget: body.ldc.responsive-body.site_base
, handleObj: {…}, … }
browser_test.coffee:46:26
click 
Object { originalEvent: click, type: "click", isDefaultPrevented: returnFalse(), target: button#test-space, currentTarget: html, relatedTarget: null, timeStamp: 1246147, jQuery32106522351333554319: true, delegateTarget: html, handleObj: {…}, … }

Answer 1

这听起来像是焦点问题（按键事件发送到焦点元素）

来自文档https://api.jquery.com/keypress/：

可以将keypress事件处理程序附加到任何元素，但是该事件仅发送到具有焦点的元素。焦点不同的元素在浏览器之间可能会有所不同，但是表单控件始终可以获取焦点，因此是此事件类型的合理候选对象。

，并且如果您希望无论元素如何都触发按键，则应将事件附加到document，因为所有事件（除非，stopPropagation都会冒起）。

let handler = (e) => {
  console.log('handled!', e.target.innerHTML);
}

$('.btn').keypress(handler);

https://codepen.io/tegaki/pen/LYPzwgJ（完整示例）

Answer 2

很可能没有其他人会遇到这样的问题，但仅仅是：

“看看您的'addEventListener'！”，

不仅仅是jQuery标准的Event接口。

就我而言，这是脚本的一个非常古老（错误）的独立部分，并且-如注释中所述-清除了奇怪的浏览器行为。它将删除（删除）“鼠标单击”事件，这些事件不会在将鼠标移到同一元素上之前发生。

永远不会敲击键盘。前面的鼠标按下是焦点单击-在我奇怪的情况下。

鼠标单击聚焦时，按钮类型“按钮”仅在“空格键”上触发

2 个答案: