区分鼠标和键盘触发onclick

Question

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

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

这个想法是，如果他们使用鼠标点击链接，那么他们可以继续使用鼠标来选择下一步做什么。但是，如果他们在页面上切换并切换到“保存”链接，那么我将打开下一行进行编辑（该页面就像一个电子表格，每一行都可以使用 ajax 进行编辑）。

我以为可以查询事件参数是哪个鼠标按钮被按下，但是当没有按钮被按下时，答案是0，和鼠标左键一样。他们我认为我可以从事件中获取 keyCode，但它会以未定义的形式返回，所以我假设鼠标事件不包含该信息。

function submitData(event, id)
{
    alert("key = "+event.keyCode + "  mouse button = "+event.button);
}

总是返回“key = undefined mouse button = 0”

你能帮忙吗？

Answer 1

处理mouseup 事件。
如果您之后立即收到click，则可能是用鼠标完成的。

Answer 2

您可以使用event.type 创建条件

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 证明我的情况：http://jsfiddle.net/AlienWebguy/HPEjt/

我使用了一个按钮，以便在选项卡焦点期间更容易看到突出显示的节点，但它对任何节点都一样。

Answer 3

您可以区分单击和键盘敲击，捕获和丢弃在按键时产生的 keydown 事件：

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

http://jsfiddle.net/NuP2g/

Answer 4

可以检查event.screenX 和event.screenY 是否为零。

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

Demo on CodePen

我无法保证它适用于所有浏览器和所有情况，但它的好处是不会尝试检测通过键盘完成的“点击”。因此，此解决方案更可靠地检测“点击”，但代价是检测它是来自键盘还是鼠标的可靠性稍差。如果您更喜欢 reverse，请查看 answer from @Gonzalo。

注意：我使用这种方法找到的一个地方是Chromium

Answer 5

你可以使用 event.detail

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

Answer 6

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

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

let mouseDown = false;

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

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

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

来源链接：https://www.darrenlester.com/blog/focus-only-on-tab

Answer 7

无法提出完全依赖事件的解决方案，但您可以将锚标记放置在按钮上并为其指定 tabindex 或 -1。这为您提供了一个可以聚焦并与键盘输入/空格键接合的按钮，以及为您提供一个可点击的表面，让您可以选择区分两个代码路径。

.button {
  position: relative;
}

.anchor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<button id="button" class="button">
  button
  <a class="anchor" href="#example" tabindex="-1"></a>
</button>

Answer 8

我使用以下

const isKeyboardClick = nativeEvent.detail === 0 && !nativeEvent.pointerType;

通过detail 和IE11 通过pointerType 在常青浏览器中工作。不适用于例如单选按钮 <input> 被 <label> 元素包裹。