how can I handle a combination of mouseover and CTRL-Key events using javascript?
I am trying to use javascript to capture a combination of a mouseover event occurring(hovering over a screen control like a button) along with the CTRL-key being pressed at the same time. So far I only seem to be able to get the javascript to work properly for the page I'm testing with when using IE. When I try to test with the same page using Firefox v. 10.0.3 the javascript can't seem to successfully capture the event of the CTRL-key being pressed. So my ultimate question is what's the best way to capture separate keyboard and mouse event combinations which occur at the same time? I want the javascript function(s) I'm trying to code to only react when I mouse over a control at the exact same time that I'm pressing the CTRL-key. Thanks for the help.
All Replies (4)
According to this page on MDN, that information should be available when your mouseover handler fires: https://developer.mozilla.org/en/DOM/MouseEvent
If you compare cross-browser event handlers, you often will see something like the following:
function doSomething(evt){ if (!evt) evt = window.event; // get evt in IE // do stuff here }
This allows you to work with evt in all browsers.
Modified by jscher2000 - Support Volunteer
So then the doSomething function only has the event object of non-IE browsers passed in whenever the mouseover event occurs?
In the above example, the first line of code in the doSomething() function ensures that the function can access the event object regardless of whether it is passed in automatically or stored as a global object.
Maybe an example would help?
<!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test page</title> <script type="text/javascript"> function mouseEventReport(evt){ if (!evt) evt = window.event; if (evt.ctrlKey) document.getElementById("debug").innerHTML += "Mouseover + ctrlKey<br>"; else document.getElementById("debug").innerHTML += "Mouseover without ctrlKey<br>"; } window.onload = function(){document.getElementById("btn1").onmouseover = mouseEventReport;}; </script> </head><body> <p><button id="btn1">Mouse over me!</button></p> <div id="debug"></div></body> </html>
jscher2000,
Do I possibly have something else going on here in the background, which may be preventing the mouseEventReport javascript function from working properly? I copied it and renamed the element id to be that used for the actual button on the page, and now neither the IE version nor the Firefox version seem to be working at all. I do not currently in the actual page code the button reference for the "onmouseover" event handler, thinking that when the page loads it will be created, but when I view the actual page source its not there once the screen comes up. So something does not appear to be working properly. The screen itself is part of a python/django application, so I wonder if either python or django could be causing problems related to the javascript not working properly?