Javascript 区分鼠标和键盘触发onclick

我需要找到一种方法来确定是否通过鼠标点击或按键激活了链接

<a href="" onclick="submitData(event, '2011-07-04')">Save</a>

始终返回“键=未定义的鼠标按钮=0”

---

您能帮忙吗？

处理

mouseup

事件。

---

如果您在之后立即得到一个

点击

，则可能是用鼠标完成的。

您可以使用

事件创建一个条件。键入

function submitData(event, id)
{
    if(event.type == 'mousedown')
    {
        // do something
        return;
    }
    if(event.type == 'keypress')
    {
        // do something else
        return;
    }
}

注意：您需要附加一个支持这两种事件类型的事件。使用JQuery，它看起来像

$（'a.save'）.bind（'mousedown keypress'，submitData（event，this））

内联的
onClick=”“
不会对您有帮助，因为它总是会通过单击事件，因为这就是它被捕获的方式

编辑：这里有一个正在运行的演示来证明我使用本机JavaScript的情况：

我使用了一个按钮，以便在选项卡焦点期间更容易看到高亮显示的节点，但对任何节点都一样
 您可以区分点击和键盘点击捕获和丢弃按键时产生的按键事件：

jQuery(function($) {
    $("a#foo").keydown(function() {
        alert("keyboard");
        return false;
    }).click(function() {
        alert("mouse");
        return false;
    })
})

可以检查和
事件。screenY
是否为零

$('a#foo').click(function(evt) {
  if (evt.screenX == 0 && evt.screenY == 0) {
    window.alert('Keyboard click.');
  } else {
    window.alert('Mouse click.');
  }
});


我无法保证它在所有浏览器和所有情况下都能工作，但它的优点是不试图检测通过键盘完成的“点击”。因此，此解决方案更可靠地检测“单击”，而检测它是否来自键盘或鼠标的可靠性稍低。如果你喜欢相反的，那就看后面的

注意：我使用此方法找到的一个地方是
您可以使用event.detail

if(event.detail === 0) {
    // keypress
} else {
    // mouse event
}

我知道这是一个老生常谈的问题，但考虑到我花了多少时间寻找一个工作、没有jquery和IE兼容的解决方案，我认为把它放在这里（我第一个来的地方）并不是一个坏主意

我对此进行了测试，发现它工作正常：

let mouseDown = false;

element.addEventListener('mousedown', () => {
  mouseDown = true;
});

element.addEventListener('mouseup', () => {
  mouseDown = false;
});

element.addEventListener('focus', (event) => {
  if (mouseDown) {
    // keyboard
  } else {
    // mouse
  }
});

源链接：
无法完全依靠事件提出解决方案，但您可以将锚定标记放置在按钮上，并给它一个
-1
的
tabindex
。这为您提供了一个按钮，可以通过键盘输入/空格键聚焦和使用，还提供了一个可单击的表面，使您可以选择区分两个代码路径


。按钮{
位置：相对位置；
}
.主播{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}

按钮
我看到了一个
事件。在这两种情况下都键入“click”（单击）。这对我很有效。因为只有当行变得可编辑时，保存按钮才会被渲染，所以我将研究jquerylive以连接mousedown和keypress事件。干杯。很酷，但这并不能真正回答问题。鼠标向下移动不是单击。这是一种变通方法，它扭曲了单击的含义，即在同一元素上单击鼠标向下，然后单击鼠标。冈萨洛的解决方案保留了这个概念的含义，没有考虑“点击”行为。点击是鼠标在同一个项目上下移动，也可以在触摸敏感设备上处理长时间触摸或拖动触摸，还可以处理各种键盘“点击”。这种策略毫无意义。仅仅因为鼠标点击用于一次交互并不意味着用户希望使用鼠标进行所有交互，键盘事件也是如此。为什么要使用一个像按钮一样的链接呢？这两个选项都高于我的工资等级，尽管我确实理解第一个。其想法是，某些超级用户（很少有）会像电子表格一样编辑页面上的每一行，他们不喜欢从键盘切换到鼠标再切换回来。其他用户只想编辑一行，然后离开。如果下一行在编辑完所选字段后变成可编辑字段，他们会分心，可能还会编辑该字段。+1太棒了！这不仅是最优雅的答案，而且实际上是保留“点击”概念含义的问题的唯一实际有效答案。其他答案切换为单击鼠标向下或鼠标向上，这只是单击的一部分。没有人希望鼠标在不同元素上以鼠标下移开始的操作被当作点击来处理。美好的从键盘“点击”有多种方式。通常是[ctrl+][alt+]enter键，但其中许多键在新选项卡中打开，以便保持一致，有时还有其他键盘快捷键。这与“enter”键不起作用。它按顺序触发两个事件。这是截至2018年9月的页面上唯一有效的解决方案，但在Safari中不起作用。Safari将屏幕坐标默认为目标元素的中心：（我也曾使用过这种方法，但在@CraigKovatch对Safari发表评论后，我注意到事实确实如此：它在Safari（v13.1.1）上不起作用。几乎完美。对引导4单选按钮不起作用，因为当鼠标点击两次活动单选按钮时，会触发两个事件（一个用于美观按钮标签，另一个用于后面的输入单选按钮）。第一个（用于）按预期返回
event.detail==1
，但第二个（用于）返回
event.detail==0
，可能是因为引导程序正在处理背景中的更改。+1表示有希望的答案，并且在大多数情况下都可以工作：）@Prid也许您可以使用
事件找到解决方法。stopPropagation
？我不确定即使您直接单击单选按钮，标签是否始终激发。IE11 event.detail对于鼠标和键盘单击事件均为0：(
let mouseDown = false;

element.addEventListener('mousedown', () => {
  mouseDown = true;
});

element.addEventListener('mouseup', () => {
  mouseDown = false;
});

element.addEventListener('focus', (event) => {
  if (mouseDown) {
    // keyboard
  } else {
    // mouse
  }
});