Question

我正在创建一个表格，用户可以通过单击，按住鼠标，然后将鼠标拖动到其他元素上以选择它们来选择表格中的元素。通过将所选元素的背景颜色更改为#444来向用户显示选择。

一切正常，但在某些<td>元素中有一个子<a>元素，当它悬停在上面时，会将背景颜色更改回原始背景颜色（白色）然后返回鼠标离开#444返回其父<a>后，选择颜色<td>。当快速执行此操作时，它会发出＆＃34;闪烁＆＃34;效果，这对我的应用需求是不可取的。

我希望通过让我的jQuery脚本在moused结束时忽略<a>元素来防止闪烁。这样做的最佳方法是什么？

我尝试使用.not('#parent-body td a)和toggleClass('highlight')但没有成功，最终得到的结果相同。

这是我创建的一个小提琴，用于演示：

http://jsfiddle.net/5wapLxnb/4/

Answer 1

mouseover个事件可能会多次发生，因此mouseenter是更好的选择：

http://jsfiddle.net/TrueBlueAussie/5wapLxnb/6/

var isMouseDown = false;

$("#parent-body td").on("mousedown", function() {
    isMouseDown = true;
    $(this).toggleClass("highlight");
    return false;
}).mouseenter(function() {
    if (isMouseDown) {
        $(this).toggleClass("highlight");
    }
});

$(document).on("mouseup", function() {
    isMouseDown = false;                        
});

在<a> element when changing background color of its parent ? jQuery/JS</a>上停止鼠标悬停的闪烁

1 个答案: