jquery - 单击时停止悬停鼠标悬停

Question

我在一个表格单元格上发生了 2 个事件。1、.hover(on, off) 上的简单 tr 行荧光笔和2、onclick，它滑动打开其下面的一个div。

这两个项目都按预期工作。我想做的是在单击 tr 时停止 .hover 函数的第二部分(在 mouseout 上)触发，以便在打开 div 时它保持突出显示。我尝试在该函数上使用该类，但 99% 的情况下，当我的鼠标仍在其上时，它会厌倦突出显示它，因此当我的鼠标移开它时，它会将其渲染回正常的 lo-lite 状态。

那么，我如何通过 .click() 调用来停止单独的 .hover 调用的第二个函数部分的运行？

这些函数本身看起来有点愚蠢，但在我的真实代码中，还有更多的事情发生。因此，这些是操作中被删除的部分。

.悬停( 函数(){
$(this).removeClass('xhead'); $(this).addClass('headerhover'); } , 功能(){ $(this).removeClass('headerhover') $(this).addClass('xhead'); } )；

还有这个:

function togglediv(id){
    $("#"+id).toggle("fast");
}

电话来自:

function loadmenu(id){
    var divid = 'div_'+id+'_detail';
    togglediv(divid);
}

这是第二次调用:

$('.viewer').click(function(e) {        
    var id = e.target.id;                   
    loadmenu(id);           
    }
});

fiddle 在工作中被阻止...抱歉，我无法让它变得更容易。

欣赏这些想法。

总而言之，在 .vm 单击时，将 headerhover 粘住，并终止 mouseout 事件，使其返回到 xhead 类。否则，如果没有点击，则执行类交换以进行行突出显示。

Answer 1

简单的方法吗？在您的click中输入如下内容:

$(this).data("sticky", true);

并在悬停(鼠标悬停部分)中检查它:

if (! $(this).data("sticky"))
{
    // proceed with hover mouseout code
}

确保您的选择器在各个事件中对齐。在上面的代码中，它没有，因此您需要一个更复杂的选择器，例如 $(this).closest('.xhead').data("sticky", true); 或者，您可以在 .xhead 本身上定义一个额外的 click 事件来处理此交互(此单击事件将冒泡，在两者上触发)。

另请注意，您在编写的 hover 代码中选择了 td.xhead，但您的 HTML 只有 tr.xhead .