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

rt4zxlrg  于 2023-04-20  发布在  jQuery
关注(0)|答案(2)|浏览(192)

我有两个事件发生在一个表格单元格上。1,一个简单的tr行高亮显示。hover(on,off)和2,onclick,它滑动打开一个div下面。
这两个项目的工作所需的。我试图做的是停止第二部分的。悬停功能(在mouseout上)当tr被点击时触发,这样当div被打开时它保持高亮显示。我试着在函数上使用这个类,但是99%的时间,当我的鼠标仍然在它上面时,它会厌倦hilight它,因此当我的鼠标离开它时,它使其返回到正常的低-轻状态。
那么,我如何使用.click()调用来停止一个单独的.hover调用的第二个函数部分的运行呢?
这些函数看起来有点愚蠢,但在我的真实的代码中,还有很多其他的操作。
public void run(){
$(this).removeClass('xhead');$(this).addClass('header');},function(){ $(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);           
    }
});

小提琴在工作中受阻...对不起,我不能让它更容易。
欣赏这些想法。
它的长和短是on .vm click,stick headerhover,kill mouseout event from returning it to xhead class.否则,如果没有单击,执行类交换来做行突出显示。

s4n0splo

s4n0splo1#

简单的方法?在你的click中输入如下内容:

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

在鼠标悬停(mouseout部分)时检查它:

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

在上面的代码中,它没有,所以你需要一个更复杂的选择器,比如$(this).closest('.xhead').data("sticky", true); * 或 *,你可以在.xhead本身定义一个额外的click事件来处理这个交互(这个点击事件将冒泡,在两个事件上触发)。
另外请注意,您在为hover编写的代码中选择了td.xhead,但您的HTML只有tr.xhead

odopli94

odopli942#

你可以“避免”这个问题,基本上是:

giving (in CSS) the button the following pseudo-class:

.yourButtonClassName:hover:enabled { transition: 1000ms; etc. }

因此:hover只有在:enabled时才能工作;

on your click event function, disable the button through the following order:

document.getElementById("yourButtonClassName").disabled = true;

c)相反,在你的鼠标悬停或鼠标离开功能上,设置if或switch等条件,这样无论按钮是否被启用,你都可以让它正常工作,但是当被禁用时,它将以不同的和定义的方式表现。
if(!document.getElementById(“yourButtonClassName”).disabled == true){
联系我们
}
就是这样
PS。请考虑更好的代码优化,在鼠标事件上优先给予指针事件。它们更适合移动的设备。

相关问题