Triggering click event with modifier keys on input element

问题

I'm writing a test for some functionality that involves user shift-clicking on a checkbox. I'm using $('input').trigger($.Event('click', { shiftKey: true })); to simulate that.

But when the event listener gets called, event.shiftKey property always gets reported as false when originating from my synthetic events, while real clicks produce the desired effect. What's more confusing, triggering the same event on a non-input element seems to work just fine. See http://jsfiddle.net/huskssk1/ for example.

I'm observing this behaviour both in my browser (Chrome 39, OS X) and test stack (Poltergeist 1.5.1 + PhantomJS 1.9.8).

What's causing this? Is there any way around it?

PS My full test stack is Ruby on Rails + RSpec + Capybara + Poltergeist + PhantomJS, if you know a better way to trigger shift-click, do let me know!

回答1:

body.on('click', function(e) { 
    //e.stopPropagation();
    console.log('body', e.shiftKey);
});

I just updated your jsfiddle: http://jsfiddle.net/huskssk1/1/

The only change I made is the jQuery version to 1.8.3, since it was not firing input's click event so I commented e.stopPropogation from body click event handler.

This clearly shows that something is different between the two versions of jQuery.

回答2:

@Vijay is correct, it's jQuery issue. The problem is in this line: https://github.com/jquery/jquery/blob/master/src/event.js#L577. It was added in jquery 1.9.0

So, you can monkey-patch jQuery by adding following code to your javascript:

delete jQuery.event.special.click.trigger

and checkbox click will work as expected: http://jsfiddle.net/ofbazqvo/ (note, I commented e.stopPropogation() on body too) with one exception: input.checked value will be invalid in you 'onclick' callback, but will update to correct value later (surprisingly, it's why this special checkbox handling was added to jquery).

Alternatively you can dispatch event manually via plain javascript: http://jsfiddle.net/6dutftkt/1/. This works without any quirks in chrome.

回答3:

You can check following fiddle for the answer to your question :

http://jsfiddle.net/fsp265p8/

You just need to press shift key and click on the Result area for the detection of shift key with click.

Code as follows:

function mouseDown(e) {
    var shiftPressed=0;
    if (parseInt(navigator.appVersion)>3) {

    var evt = e ? e:window.event;
    if (document.layers && navigator.appName=="Netscape" && parseInt(navigator.appVersion)==4) {
        var mString =(e.modifiers+32).toString(2).substring(3,6);
        shiftPressed=(mString.charAt(0)=="1");
        self.status="modifiers="+e.modifiers+" ("+mString+")"
    } else {
        shiftPressed=evt.shiftKey;
        self.status=""
        +  "shiftKey="+shiftPressed
    }
    if (shiftPressed) 
        alert ("Mouse clicked with the following keys:\n"
        + (shiftPressed ? "Shift ":"")
        );
    }
    return true;
}
if (parseInt(navigator.appVersion)>3) {
    document.onmousedown = mouseDown;
    if (navigator.appName=="Netscape") {
        document.captureEvents(Event.MOUSEDOWN);
    }
}

Hope this helps

回答4:

Body is what, which has some elements in it and not the whole page(means empty page). So, if body is has no elements in it then click event will not trigger. Also point one thing that your check-box click event occurs as it is itself an element.

If you want the page to be triggered on click, then you have to use $(document) in place of $(document.body)

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

Working Demo

Also, to verify the body area you can add CSS to test

body{
    border:1px solid #F00;
}

See your code in the Demo, why it was not working(works only in the red border area of demo)

来源：https://stackoverflow.com/questions/27987077/triggering-click-event-with-modifier-keys-on-input-element

标签

jquery

ruby-on-rails

google-chrome

javascript-events

poltergeist