使用输入元素上的修饰键触发单击事件 [英] Triggering click event with modifier keys on input element

问题描述

我正在为一些涉及用户按住Shift键点击复选框的功能编写测试。我正在使用 $（'input'）。触发器（$ .Event（'click'，{shiftKey：true}））; 来模拟它。

但是当调用事件监听器时， event.shiftKey 属性总是被报告为 false 来自我的合成事件，而实际点击产生所需的效果。更令人困惑的是，在非输入元素上触发相同的事件似乎工作得很好。例如，请参见 http://jsfiddle.net/hus​​kssk1/ 。

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

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

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

解决方案

  body.on（'click'，function（e）{
 //e.stopPropagation（）; 
 console.log（'body'，e.shiftKey）; 
}）; 
  

我刚刚更新了你的jsfiddle： http://jsfiddle.net/hus​​kssk1/1/

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

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

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!

解决方案

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.

这篇关于使用输入元素上的修饰键触发单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！