事件与鼠标事件
Event vs MouseEvent
我正在编写一个 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 语句。
有人可以帮忙吗?
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>
使用另一个事件处理程序来侦听按键事件并设置两个侦听器都可以访问的变量并保持 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>
请记住,您必须在文档中单击才能在测试前获得焦点。
张贴这个以防其他人遇到同样的问题。
我通过 element.onmousedown = handleOnClick;
而不是 element.addEventListener('click', handleOnClick);
来解决这个问题。
现在传递给 handleOnClick
的 event
总是 MouseEvent
我可以做到 event.shiftKey
.
我正在编写一个 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 语句。
有人可以帮忙吗?
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>
使用另一个事件处理程序来侦听按键事件并设置两个侦听器都可以访问的变量并保持 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>
请记住,您必须在文档中单击才能在测试前获得焦点。
张贴这个以防其他人遇到同样的问题。
我通过 element.onmousedown = handleOnClick;
而不是 element.addEventListener('click', handleOnClick);
来解决这个问题。
现在传递给 handleOnClick
的 event
总是 MouseEvent
我可以做到 event.shiftKey
.