更改<a>元素父元素的背景颜色时停止在<td>上闪烁鼠标悬停?jQuery/JS.

Stop flickering of mouseover on <a> element when changing background color of its parent <td>? jQuery/JS

本文关键字：元素 鼠标 闪烁 悬停 jQuery td JS 背景 颜色 更改      更新时间：2023-09-26

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

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

我想通过让我的 jQuery 脚本在将鼠标悬停在 <a> 元素上时忽略它来防止闪烁。这样做的最佳方法是什么？

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

这是我创建的小提琴来演示：

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

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;                        
});
相关文章：