jQuery .click имеет приоритет над .hover

Question

У меня есть значок печати (изображение), который при нажатии вызывает window.print();.Тем не менее, у меня также есть событие наведения на этот же значок печати, который изменяет src изображения (эффект градиента).

Код:

   $( "#print_icon" ).hover(

    //mouseover
    function(){
        $( this ).attr( "src", "http://example.com/images/image1.png" );
    },

    //mouseout
    function(){
        $( this ).attr( "src", "http://example.com/images/image2.png" );
    });

// print onclick//
$( "#print_icon" ).click(function() {
    window.print();
});

Проблема:

Без нажатия, наведение работает как задумано.Когда кто-то щелкает изображение, появляется окно печати, но функция «отключение мыши» не запускается, пока окно печати не будет закрыто.Я хотел бы изменить это поведение, чтобы функция отключения мыши работала, даже если окно печати активно или отображается.

Возможно ли это?

ОБНОВЛЕНИЕ

по-прежнему не работает должным образом:

$( "#print_icon" ).hover(

    //mouseover
    function(){
        $( this ).attr( "src", "http://library.weill.cornell.edu/prc/images/print_icon_onclick.png" );
        $( this ).click(function() {
            window.print();
        });
    },

    //mouseout
    function(){
        $( this ).attr( "src", "http://library.weill.cornell.edu/prc/images/print_icon.png" );
    });

Answer 1

Во всех известных мне браузерах window.print () запускает модальное окно печати, то есть окно, которое запрещает любое другое взаимодействие с веб-страницей до ее закрытия.Это сделано специально - браузер захватывает моментальный снимок веб-страницы в том виде, в каком она была отображена при начале операции печати. ​​

Короче говоря, невозможно вызвать события мыши, когда открыто окно печати.

Лучшей альтернативой было бы инициирование события отпускания мыши в обработчике щелчков перед началом операции печати:

// Click Handler
$( "#print_icon" ).click(function() {
  $(this).mouseleave();
  window.print();
});

Скорее всего, вы все равно будете двигать мышь от кнопки, чтобы выбрать принтернастройки, поэтому для практических целей это решит проблему.

Обновление

setTimeout () может изменить страницу, пока модальное окнооткрыть - по крайней мере, в Firefox 5. Попробуйте это:

// Click Handler
$( "#print_icon" ).click(function() {
  var that = this;
  setTimeout( function() {
    $(that).mouseleave();
  }, 2000);
  window.print();
});

Answer 2

Я почти уверен, что с этим ничего не поделаешь.Диалог печати блокирует все взаимодействие со страницей, поэтому ваши события никогда не будут срабатывать, пока она открыта.

Answer 3

Попробуйте вызвать событие «mouseout» при выполнении события «click». Таким образом вы заставляете изображение вашего принтера меняться.

// Click Handler
$( "#print_icon" ).click(function() {
  $(this).trigger('mouseout');
  window.print();
});