我有一个表格网格,可以通过单击和拖动类型的功能突出显示单元格/复选框。
当用户单击某个单元格并将鼠标悬停一段时间时,该单元格/复选框会频繁闪烁(触发大量事件)。
有没有办法降低这个敏感度?即某种计时事件?
我尝试将 .delay 添加到 mouseover 切换类,但它的行为很奇怪。
$(function () {
var isMouseDown = false,isHighlighted;
$("#tablegrid").on('mousedown', 'td.nohighlight', function() {
isMouseDown = true;
$(this).toggleClass("highlighted");
isHighlighted = $(this).hasClass("highlighted");
var checkBoxes = $(this).find('.dosearchescheckbox :checkbox').trigger('click');
return false; // prevent text selection
})
$("#tablegrid").on('mouseover', 'td.nohighlight', function() {
if (isMouseDown) {
$(this).toggleClass("highlighted");
var checkBoxes = $(this).find('.dosearchescheckbox :checkbox').trigger('click');
}
})
$("#tablegrid").bind('selectstart', 'td.nohighlight', function() {
return false;
})
$(document)
.mouseup(function () {
isMouseDown = false;
});
});
最佳答案
这里的问题是你的悬停处理程序中没有任何东西可以阻止这种行为。我建议添加一个外部变量来跟踪它,并添加一个“mouseout”处理程序来跟踪悬停事件的结束,例如:
$(function () {
let isMouseDown = false;
let hasBeenClicked = false;
let isHighlighted;
$("#tablegrid").on('mousedown', 'td.nohighlight', function() {
isMouseDown = true;
$(this).toggleClass("highlighted");
isHighlighted = $(this).hasClass("highlighted");
if (hasBeenClicked === false) {
$(this).find('.dosearchescheckbox :checkbox').trigger('click');
hasBeenClicked = true;
}
return false; // prevent text selection
})
$("#tablegrid").on('mouseover', 'td.nohighlight', function() {
if (isMouseDown) {
$(this).toggleClass("highlighted");
if (hasBeenClicked === false) {
$(this).find('.dosearchescheckbox :checkbox').trigger('click');
hasBeenClicked = true;
}
}
})
// May or may not need this part depending on your app design
$("#tablegrid").on('mouseout', 'td.nohighlight', function() {
hasBeenClicked = false;
})
$("#tablegrid").bind('selectstart', 'td.nohighlight', function() {
return false;
})
$(document).mouseup(function () {
isMouseDown = false;
hasBeenClicked = false;
});
});
其基本要点是,一旦点击运行一次,它就会将变量 (hasBeenClicked
) 设置为 true。然后,它会在再次运行点击触发器之前进行检查。原因是“mouseover”事件在鼠标悬停在元素上方的每个循环上触发,而不仅仅是在悬停发生时触发。一旦单击元素触发一次,这将阻止进一步的逻辑运行。
关于javascript - 鼠标按下事件敏感度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53038123/