Solved

jQuery's event object's metakey property not working

Posted on 2015-01-13
3
172 Views
Last Modified: 2015-01-16
I was trying out a sample code, and I noticed the metakey property of the event object is not working as it keeps reporting back false even when I press the ctrl key in Windows 7. Can anyone please tell me why? I checked jQuery's bug tracker, they say it has been fixed, but not from my point of view, especially since it doesn't work on any browser I tested this with (IE, Firefox, Opera, Chrome, and Safari).

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Event Handling</title>
    <link rel="stylesheet" href="../style.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
        $("document").ready(function() {
            $("#example").on("mousemove", onMouseOver);
            $("#example").on("click", onMouseClick);
            $("#example").on("mouseleave", onMouseLeave);
        });
        
        function onMouseOver(evt) {
            $("#example").text(evt.type + ": " + evt.pageX + ", " + evt.pageY
                               + "\n" + "Button: " + evt.which + 
                               " Key: " + evt.metaKey);
        }
        function onMouseClick(evt) {
            $("#example").text(evt.type + ": " + evt.pageX + ", " + evt.pageY);
            $("#example").off("mousemove", onMouseOver);
        }
        function onMouseLeave(evt) {
            $("#example").text("mouseleave");
        }
    </script>
</head>
<body>
    <h1>jQuery Event Handling</h1>
    <p>jQuery normalizes an event structure across browsers and provides cross-browser consistency for properties such as the event name, the page coordinates of the mouse, the element where the event originated along with any other element related to the event, and information such as whether a meta-key or specific mouse button was pressed.</p>
    <div id="example">
    </div>
</body>
</html>

Open in new window

0
Comment
Question by:elepil
  • 2
3 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40554442
The ctrl key isn't classed as a meta key. The Windows key is the only meta key on standard keyboards and it seems that key isn't exposed to the browser to capture.
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40554446
see here for a demo using the ctrl key: http://jsbin.com/piyuwu/1/edit?html,js

I've also changed your events to be captured over the <body>, not the empty "example" div
0
 

Author Closing Comment

by:elepil
ID: 40554795
Thanks, Rob, that answers my question!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery animation faster 1 33
Bootstap Icons 3 40
Google script to get long/lat from address 10 65
Example unit tests with AngularJS 3 40
I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now