区分鼠标和键盘触发onclick

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=""不会帮助你,因为它总是会传递click事件,因为它是如何被困的.

编辑:这是一个工作演示,用本机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.');
  }
});

在CodePen上演示

我无法保证它适用于所有浏览器和所有情况,但它的好处是不会尝试通过键盘检测到"点击".因此,该解决方案可以更可靠地检测"点击",代价是检测键盘或鼠标是否有点不太可靠.如果您更喜欢反向,请看@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
}