鼠标事件的触发点击与切换
Triggered click vs. toggle for mouse events
我有一个函数可以根据鼠标事件将 td 单元格从突出显示切换为不突出显示。这很好用。
复选框触发的点击操作同时发生。但是,触发的点击似乎比切换事件更敏感。有时,当鼠标悬停在 td 单元格上时,复选框会闪烁 on/off...导致突出显示和复选框有时不同步。
如何最好地使切换类和触发点击同步?
$(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", isHighlighted);
var checkBoxes = $(this).find('.dosearchescheckbox :checkbox').trigger('click');
}
})
$("#tablegrid").bind('selectstart', 'td.nohighlight', function() {
return false;
})
$(document)
.mouseup(function () {
isMouseDown = false;
});
});
由于第二个参数 isHighlighted
在 mouseover
上始终为真,因此将始终添加 highlighted
class,同时复选框仍处于切换状态。
所以你可以打电话
$(this).toggleClass("highlighted");
// Instead of
// $(this).toggleClass("highlighted", isHighlighted);
$( "#foo" ).toggleClass( className, addOrRemove );
相当于:
if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}
我有一个函数可以根据鼠标事件将 td 单元格从突出显示切换为不突出显示。这很好用。
复选框触发的点击操作同时发生。但是,触发的点击似乎比切换事件更敏感。有时,当鼠标悬停在 td 单元格上时,复选框会闪烁 on/off...导致突出显示和复选框有时不同步。
如何最好地使切换类和触发点击同步?
$(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", isHighlighted);
var checkBoxes = $(this).find('.dosearchescheckbox :checkbox').trigger('click');
}
})
$("#tablegrid").bind('selectstart', 'td.nohighlight', function() {
return false;
})
$(document)
.mouseup(function () {
isMouseDown = false;
});
});
由于第二个参数 isHighlighted
在 mouseover
上始终为真,因此将始终添加 highlighted
class,同时复选框仍处于切换状态。
所以你可以打电话
$(this).toggleClass("highlighted");
// Instead of
// $(this).toggleClass("highlighted", isHighlighted);
$( "#foo" ).toggleClass( className, addOrRemove );
相当于:
if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}