区分鼠标和键盘触发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);
}

总是返回“键=未定义的鼠标按钮=0”

你能帮忙吗？

Answer 1

可以检查是否 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.');
  }
});

CodePen 上的演示

我无法保证它适用于所有浏览器，并且所有情况，但它的好处是不尝试检测通过键盘完成的“点击”。因此，该解决方案更可靠地检测“点击”，但代价是检测“点击”是否来自键盘或鼠标的可靠性稍差。如果您希望相反，请查看@Gonzalo 的答案。

注意：我发现使用此方法的一个地方是 Chromium

Answer 2

您可以使用 event.detail

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

Answer 3

您可以使用 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 4

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

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

http:// /jsfiddle.net/NuP2g/

Answer 5

我

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

通过 detail 在常青浏览器中使用以下作品，并通过 pointerType 在 IE11 中使用以下作品。不适用于单选按钮 由 元素包裹的情况。

Answer 6

如今，您可以使用 instanceof，它甚至具有完整的浏览器支持 。

function onMouseOrKeyboardSubmit(event, id) {
    if (event instanceof KeyboardEvent) {
        alert("Submitted via keyboard");
    } else if (event instanceof MouseEvent) {
        alert("Submitted via mouse");
    } else {
        alert("Unexpected submit event");
    }
}

Answer 7

我知道这是一个老问题，但考虑到我花了多少时间寻找一个可行的、没有 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 8

无法提出完全依赖事件的解决方案，但您可以将锚标记放置在按钮上，并为其指定 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 9

处理 mouseup 事件。
如果您随后立即点击，则可能是通过鼠标完成的。