Geek Answers Handbook

Trigger a click event using modifier keys on an input element

I am writing a test for some functionality that includes right-clicking on a checkbox. I use $('input').trigger($.Event('click', { shiftKey: true }));to simulate this.

But when the event listener is called, the property event.shiftKeyalways receives a message falsewhen creating from my synthetic events, while real clicks give the desired effect. What's more confusing, firing the same event on an element doesn't inputseem to work fine. For example, http://jsfiddle.net/huskssk1/ .

I observe this behavior both in my browser (Chrome 39, OS X) and in the test stack (Poltergeist 1.5.1 + PhantomJS 1.9.8).

What causes this? Is there any way around this?

PS My full test stack is Ruby on Rails + RSpec + Capybara + Poltergeist + PhantomJS, if you know the best way to trigger a click change, let me know!

+4
source share
4 answers
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 was a version of jQuery prior to version 1.8.3, since it does not fire a click input event, so I commented on e.stopPropogation from the body click event handler.

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

+4
source

@Vijay , jQuery. : https://github.com/jquery/jquery/blob/master/src/event.js#L577. jquery 1.9.0

, jQuery -, javascript:

delete jQuery.event.special.click.trigger

: http://jsfiddle.net/ofbazqvo/ (, e.stopPropogation() ) : input.checked onclick, ( , ​​ jquery).

javascript: http://jsfiddle.net/6dutftkt/1/. - .

+4

:

http://jsfiddle.net/fsp265p8/

Shift .

:

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);
    }
}

,

0

Body - , , ( ). , , click . , , .

, , $(document) $(document.body)

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

In addition, to check the area of ​​the body, you can add CSS to check

body{
    border:1px solid #F00;
}

See your code in the demo why it doesn't work (only works in the red border area of ​​the demo)

0
source

More articles:


All Articles