事件vs MouseEvent

Question

我正在编写一个铬扩展名，当shiftKey被按下时，我想做一些事情，同时点击一个项目。我知道怎么弄到变形金钥：

event.shiftKey

但问题是，有时传递给click处理程序的click对象是Event类型的，有时是MouseEvent类型的，当事件是Event类型时，没有shiftKey的属性。这是我添加eventListener的时候：

elemet.addEventListener('click', handleOnClick);

下面是handleOnClick函数：

function handleOnClick(event) {
    console.log(event);
    if (event.shiftKey) {
        // do something
    }
}

下面是我在铬控制台中看到的内容:有时：

Event {isTrusted: false, type: "click", ...}

在这种情况下，即使按下shift键，也不会执行if语句。

有时：

MouseEvent {isTrusted: true, screenX: -1611, screenY: -91, clientX: 766, clientY: 90, …}

在这种情况下，在按shift键时执行if语句。

有人能帮忙吗？

Answer 1

如果其他人遇到了同样的问题，请发布这篇文章。我通过执行element.onmousedown = handleOnClick;而不是element.addEventListener('click', handleOnClick);来修正这个问题。现在传递给handleOnClick的handleOnClick总是MouseEvent，而我可以做event.shiftKey。

Answer 2

我知道如何获得shiftkey：event.shiftKey

嗯，不完全是。事件必须是支持它的事件。所有其他人继承的标准Event都没有.shiftKey属性。键盘事件，比如keyup和keydown (而不是keypress)。

现在，如果您正确地设置了一个click事件处理程序，那么当一个click发生并且MouseEvent也有一个.shiftKey属性时，MouseEvent将触发什么。

因此，只要您正在处理click (即MouseEvent)，您将始终能够获得event.shiftKey

​

$(document).on('click', function(e){
  console.log(e.shiftKey);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

Answer 3

使用另一个事件处理程序，该处理程序侦听键事件，并设置一个可供两个侦听器访问并保持shift键状态的变量。示例：

​

var shiftPressed = false;

test.onclick = (evt)=>console.log(shiftPressed ? 'With shift' : 'No shift');

window.onkeydown = (evt)=>{shiftPressed = evt.shiftKey;};
window.onkeyup = (evt)=>{shiftPressed = evt.shiftKey;};

<button id='test'>Click Me with and without shift!</button>

​

记住，您必须在文档中单击，以便在测试之前使其具有焦点。