jQuery .click 优先于 .hover答案

【问题标题】：jQuery .click taking precedence over .hoverjQuery .click 优先于 .hover
【发布时间】：2011-07-29 17:23:13
【问题描述】：

我有一个打印图标（图像），单击它时会调用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”功能在打印窗口关闭之前不会运行。我想更改此行为，以便即使打印窗口处于活动状态或显示，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" );
    });

【问题讨论】：

您是否尝试将点击事件附加到第一个悬停函数中的 $(this) ？可能不行……
这个不行，还多次调用打印窗口。我不确定我写的是否完全符合您的想法（请参阅“更新”下的代码）。

标签： jquery printing window click hover

【解决方案1】：

在我所知道的所有浏览器中，window.print() 都会启动一个模态打印窗口——也就是说，一个在关闭之前阻止与网页进行所有其他交互的窗口。这是设计使然——当打印操作开始时，浏览器会抓取网页的快照。

简而言之，在打印窗口打开时无法触发 mouseout 事件。

最好的选择是在开始打印操作之前在单击处理程序中触发 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();
});

【讨论】：

这是个好主意，但是点击打印图标后，即使光标仍然悬停在图像上，图像 src 也会发生变化
我在回答中添加了一些解释。简短版本：无法直接执行您的要求。这是我看到的最接近的替代品。
我接受您的答案是正确的，因为它的详尽解释和实用性。在我们解决这个问题之前，是否有任何方法可以设置 mouseleave 的延迟，例如 2 秒延迟？
在打印窗口关闭之前，“mouseout”效果不会发生。我对现在的方式非常满意，所以除非你想为了你的乐趣而坐立不安（然后告诉我），我认为这已经足够了。

【解决方案2】：

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

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

【讨论】：

这是个好主意，但是点击打印图标后，即使光标仍然悬停在图像上，图像 src 也会发生变化
发生这种情况是因为您正在强制“mouseout”事件发生。此外，正如@kingjiv 所说：“打印对话框会阻止与页面的所有交互，因此您的事件在它打开时永远不会触发。”
您也可以在没有 javascript 的情况下实现这一点。您还应该尝试使用 CSS 来做到这一点，例如#print_icon:hover{background: url(image/url);} 所以当用户的鼠标在按钮上/离开按钮时，图像会改变。
就我现在的代码而言，这不起作用，因为我试图为图像（打印图标）提供背景图像。我真的想不出任何其他方式来使用 CSS hover 来实现预期的效果，而且由于我已经有了两个打印图像，我想我会选择 Josh 的答案。

【解决方案3】：

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

【讨论】：