事件与鼠标事件

Question

我正在编写一个 chrome 扩展程序，我想在单击某个项目时按下 shiftKey 时执行某些操作。我知道如何获得 shiftkey:

event.shiftKey

但问题是有时传递给 click 处理程序的 event 对象是 Event 类型，有时它是 MouseEvent 类型并且没有 [= shiftKey 的 39=] 当事件的类型为 Event.. 这是我添加事件监听器的时候：

elemet.addEventListener('click', handleOnClick);

这里是 handleOnClick 函数：

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

这是我在 chrome 控制台中看到的：有时：

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

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

有时：

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

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

有人可以帮忙吗？

Answer 1

I know how to get the shiftkey: event.shiftKey

嗯，不完全是。该事件必须是支持它的事件。所有其他人继承自的标准 Event 没有 .shiftKey 属性。键盘事件，如 keyup 和 keydown（不是 keypress）将。

现在，如果您正确设置了 click 事件处理程序，那么 MouseEvent is what will fire when a click occurs and a MouseEvent also has a .shiftKey 属性.

因此，只要您正在处理一个 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 2

使用另一个事件处理程序来侦听按键事件并设置两个侦听器都可以访问的变量并保持 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>

请记住，您必须在文档中单击才能在测试前获得焦点。

Answer 3

张贴这个以防其他人遇到同样的问题。我通过 element.onmousedown = handleOnClick; 而不是 element.addEventListener('click', handleOnClick); 来解决这个问题。现在传递给 handleOnClick 的 event 总是 MouseEvent 我可以做到 event.shiftKey.

事件与鼠标事件

Event vs MouseEvent

javascript

google-chrome-extension

dom-events

mouseevent

onclicklistener