起初,bind
是jQuery中的较新版本过时,使用on
代替。
第二,您可以将parent
保存在mousedown
事件中,并在mouseover
中检查它。通过这种方式,您可以检查td
是否与tr
相同。更新后的代码可能是这样的:
var isMouseDown = false, parent;
$("#mytable td").mousedown(function() {
var $this = $(this);
isMouseDown = true;
parent = $this.closest('tr').get(0);
$this.toggleClass("highlighted");
return false; // prevent text selection
}).mouseover(function() {
var $this = $(this);
if (isMouseDown && parent === $this.closest('tr').get(0)) {
$this.toggleClass("highlighted");
}
}).on("selectstart", function() {
return false; // prevent text selection in IE
});
JSFiddle
更新:
我已经更新了你的代码。做了一些优化并添加了另一个解决方案,它只在mousedown
事件处理程序中添加了mouseenter
事件处理程序(而不是mouseover
)。此外,我添加了代码以清除之前的选择。
下面是最终的代码和对应的JSFiddle:
var isMouseDown = false,
$cells = $('#mytable td');
$cells.on('mousedown', function() {
$cells.removeClass('highlighted'); // Clear previous selection
isMouseDown = true;
$(this)
.toggleClass('highlighted')
.siblings('td')
.on('mouseenter', onMouseEnter); // Add mouseenter event handler on siblings
return false;
}).on('mouseup', function() {
$(this).siblings('td').off('mouseenter'); // Remove mouseenter event handler from siblings
}).on('selectstart', function() {
return false;
});
// The onMouseEnter handler
function onMouseEnter() {
if (isMouseDown) {
$(this).toggleClass("highlighted");
}
}