Запуск события щелчка с помощью клавиш-модификаторов на элементе ввода

Я пишу тест для некоторых функций, которые включают в себя щелчок пользователя по флажку. Я использую $('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-щелчок, дайте мне знать!


ruby-on-rails google-chrome jquery jquery-events poltergeist
person Toms Mikoss    schedule 16.01.2015    source источник

Ответы (4)


arrow_upward
4
arrow_downward 

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 что-то отличается.

person Vijay    schedule 19.01.2015

arrow_upward
4
arrow_downward

@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/ . Это работает без каких-либо причуд в хроме.

person glyuck    schedule 22.01.2015

arrow_upward
0
arrow_downward

Вы можете проверить следующую скрипку для ответа на ваш вопрос:

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

Надеюсь это поможет

person Sunil Verma    schedule 19.01.2015
comment
К сожалению, это не помогает - мой случай конкретно связан с нажатием на <input type='checkbox' /> элементы DOM, которые, похоже, работают по-разному. - person Toms Mikoss; 19.01.2015

arrow_upward
0
arrow_downward

Body - это то, что содержит некоторые элементы, а не всю страницу (означает пустую страницу). Таким образом, если в теле нет элементов, событие щелчка не сработает. Также обратите внимание на то, что событие щелчка флажка происходит, поскольку оно само является элементом.

Если вы хотите, чтобы страница запускалась по клику, вам нужно использовать $(document) вместо $(document.body).

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

Рабочая демонстрация

Кроме того, чтобы проверить область тела, вы можете добавить CSS для проверки

body{
    border:1px solid #F00;
}

Посмотрите свой код в Демо, почему он не работает (работает только в области с красной рамкой) демо)

person Rohan Kumar    schedule 22.01.2015