单击时停止鼠标悬停

Question

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

这两个项目都按需要工作。我要做的是在单击 tr 时停止 .hover 函数的第二部分（在 mouseout 上），以便在打开 div 时它保持突出显示。我尝试在该函数上使用该类，但 99% 的时间，当我的鼠标仍在它上面时，它会疲倦地高亮它，因此当我的鼠标移开它时，它会使其恢复到正常的 lo-lite 状态。

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

这些函数看起来有点愚蠢，但在我的真实代码中，还有很多事情要做。所以，这些是动作的剥离部分。

.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。