使用输入元素上的修饰键触发点击事件

Question

我正在为一些涉及用户按住 Shift 键并单击复选框的功能编写测试。我正在使用 $('input').trigger($.Event('click', { shiftKey: true })); 来模拟。

但是当事件侦听器被调用时，event.shiftKey 属性总是在源自我的合成事件时被报告为 false，而实际点击会产生预期的效果。更令人困惑的是，在非 input 元素上触发相同的事件似乎工作得很好。例如，参见 http://jsfiddle.net/huskssk1/。

我在我的浏览器（Chrome 39，OS X）和测试堆栈（Poltergeist 1.5.1 + PhantomJS 1.9.8）中都观察到这种行为。

这是什么原因造成的？有什么办法吗？

PS 我的完整测试堆栈是 Ruby on Rails + RSpec + Capybara + Poltergeist + PhantomJS，如果你知道触发 shift-click 的更好方法, 请告诉我！

Answer 1

您可以查看以下 fiddle 以获得您问题的答案：

http://jsfiddle.net/fsp265p8/

只需要按住shift键，点击检测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);
    }
}

希望对您有所帮助

Answer 2

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

我刚刚更新了你的 jsfiddle：http://jsfiddle.net/huskssk1/1/

我所做的唯一更改是将 jQuery 版本更改为 1.8.3，因为它没有触发输入的点击事件所以我评论了 e.stopPropogation 来自正文点击事件处理程序。

这清楚地表明 jQuery 的两个版本之间有些不同。

Answer 3

@Vijay 是正确的，这是 jQuery 问题。问题出在这一行：https://github.com/jquery/jquery/blob/master/src/event.js#L577。它是在 jquery 1.9.0

中添加的

因此，您可以通过将以下代码添加到 javascript 来猴子修补 jQuery：

delete jQuery.event.special.click.trigger

并且复选框单击将按预期工作：http://jsfiddle.net/ofbazqvo/（注意，我也在 body 上评论了 e.stopPropogation()），但有一个例外：input.checked 值对您无效 'onclick' 回调，但稍后会更新为正确的值（令人惊讶的是，这就是将此特殊复选框处理添加到 jquery 的原因）。

或者您可以通过纯 javascript: http://jsfiddle.net/6dutftkt/1/ 手动发送事件。这在 chrome.

中没有任何怪癖

Answer 4

Body 是什么，里面有一些元素而不是整个页面（意味着空页面）。因此，如果 body 中没有元素，则不会触发 click 事件。还要指出一件事，您的 check-box 点击事件发生，因为它本身就是一个元素。

如果您希望页面在点击时触发，那么您必须使用 $(document) 代替 $(document.body)

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

Working Demo

此外，要验证 body 区域，您可以将 CSS 添加到测试

body{
    border:1px solid #F00;
}

在 Demo 中查看您的代码，为什么它不起作用（仅在演示的红色边框区域有效）

使用输入元素上的修饰键触发点击事件

Triggering click event with modifier keys on input element

jquery

google-chrome

ruby-on-rails

poltergeist

jquery-events