jquery - Mouseout 和 mousedown 冲突

Question

table如果用户将鼠标放在用动画着色的每一行上，我想进入，当鼠标移开时，行的颜色会恢复为默认值。但是如果用户右键单击该行，该行将变为红色，直到单击上下文菜单。

我尝试了这段代码，但是当用户右键单击并想要选择一个菜单项时，红色行返回默认值，但我希望行是红色的，直到单击（选择）：

$(function () {
$('.users').contextMenu({
    selector: 'tr',
    callback: function (key, options) {
        if (key == 'delete') {
            if (confirm(" Are you sure?")) {
                $.post("../Actions/Delete.ashx", { type: "user", id: $(this).attr('id') });
                $(this).animate({ backgroundColor: '#FF80FF' }, 1000);
            }
        }

    },
    items: {
        "edit": { name: "edit" },
        "delete": { name: "delete" }
    }
});
$('tr').mouseover(function () {
    $('td', this).stop(true, true).animate
    ({ backgroundColor: "#80FF00" }, 300);
});

$('tr').mouseout(function () {
    $('td', this).stop(true, true).animate
    ({ backgroundColor: "white" }, 300);
});
$('tr').mousedown(function (event) {
    if (event.which==3) {
        $('td', this).animate
    ({ backgroundColor: "red" }, 300);
    }
});
});

Answer 1

检查右键单击clicked标志：

$(function () {
var clicked=false;
$('.users').contextMenu({
    selector: 'tr',
    callback: function (key, options) {
        if (key == 'delete') {
            if (confirm(" Are you sure?")) {
                $.post("../Actions/Delete.ashx", { type: "user", id: $(this).attr('id') });

                $(this).animate({ backgroundColor: '#FF80FF' }, 1000);
            }
        clicked=false;
        }

    },
    items: {
        "edit": { name: "edit" },
        "delete": { name: "delete" }
    }
});
$('tr').mouseover(function () {
    $('td', this).stop(true, true).animate
    ({ backgroundColor: "#80FF00" }, 300);
});

$('tr').mouseout(function () {
    if(!clicked){
    $('td', this).stop(true, true).animate
    ({ backgroundColor: "white" }, 300);
}
});
$('tr').mousedown(function (event) {
    if (event.which==3) {
        clicked=true;
        $('td', this).animate
    ({ backgroundColor: "red" }, 300);
    }
});
});