Question

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

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

这个想法是，如果他们使用鼠标点击链接，那么他们可以继续使用鼠标选择下一步做什么。但是如果他们在页面上标签并且他们选中了Save链接，那么我将打开然后下一行进行编辑（该页面就像一个电子表格，每行都可以使用ajax编辑）。

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

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

始终返回“key = undefined mouse button = 0”

你能帮忙吗？

Answer 1

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

可以检查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

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

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

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.detail

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

Answer 5

我知道这是一个老问题，但是考虑到我浪费了很多时间寻找有效的，没有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 6

无法提供完全依赖于事件的解决方案，但是您可以将锚标记放在按钮上，并为其赋予tabindex中的-1。这为您提供了一个可以集中注意力并与键盘Enter /空格键配合使用的按钮，还为您提供了一个可点击的界面，使您可以选择区分两个代码路径。

.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 7

处理mouseup事件如果您之后获得了click，那么可能已经用鼠标完成了。

区分鼠标和键盘触发onclick

7 个答案: