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

问题：

不点击，悬停按预期工作。当有人单击图像时，会出现打印窗口，但在取消打印窗口之前，“mouseout”功能不会运行。我想更改此行为，以便即使打印窗口处于活动状态或显示，鼠标输出功能也会运行。

这可能吗？

更新

仍无法正常工作：

$( "#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（）启动一个模态打印窗口 - 即一个窗口，在窗口关闭之前阻止与网页的所有其他交互。这是设计的 - 浏览器在打印操作开始时抓取网页的快照。

简而言之，打印窗口打开时无法触发鼠标输出事件。

最好的选择是在开始打印操作之前在点击处理程序中触发mouseleave事件：

// 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

尝试在执行“click”事件时触发“mouseout”事件。这样就可以强制更改打印机图像。

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

Answer 3

我很确定你无能为力。打印对话框会阻止与页面的所有交互，因此您的事件在打开时永远不会触发。

jQuery .click优先于.hover

3 个答案: