Question

当ctrl向下和向上并且鼠标分别位于元素之外时，我需要在表格单元格内显示/隐藏按钮。所以，我写了类似的东西：

$(document).keydown(function (event) {
        if (event.which == 17)
        {
            showHideEditBtn(true);
        }
    });
    $(document).keyup(function (event) {
        if(event.which == 17)
        {
            showHideEditBtn(false)
        }
    });

    function showHideEditBtn(ctrlPressed)
    {
        var tableCell = $('.mouseoverbtn').parent();
        if (tableCell != '' && tableCell != undefined)
        {
            $(tableCell).mouseenter(function () {
                if(ctrlPressed)
                {
                    $(this).find('button').show();
                }
            });
            $(tableCell).mouseover(function () {
                if (!ctrlPressed) {
                    $(this).find('button').hide();
                }
                else {
                    $(this).find('button').show();
                }
            });
            $(tableCell).mousemove(function () {
                if (!ctrlPressed) {
                    $(this).find('button').hide();
                }
                else {
                    $(this).find('button').show();
                }
            });
            $(tableCell).mouseleave(function () {
                $(this).find('button').hide();
            });
        }
    }

这里的问题是，当鼠标悬停在表格单元格上但不移动时，按钮会保持显示或隐藏状态。例如，如果我按下ctrl按钮移动该表格单元格，它会显示按钮，但是当我释放ctrl时，即使释放了ctrl按钮，按钮仍会显示，反之亦然。当鼠标悬停在元素上但不移动时，实际可以处理的是什么。

P.S。当光标在表格单元格内移动时，一切都很好。

Answer 1

我确实这样解决了：

$(document).keydown(function (event) {
    var tableCell = $('.mouseoverbtn').parent();
    if(tableCell.length > 0 && (event.which == 17 || event.keyCode == 17))
    {
        tableCell.mouseover(function () {
            for (i = 0; i < tableCell.length; i++) {
                $(tableCell[i]).find('button').show();
            }
        });
        for (i = 0; i < tableCell.length; i++) {
            if ($(tableCell[i]).is(':hover')) {
                $(tableCell[i]).find('button').show();
            }
            else {
                $(tableCell[i]).find('button').hide();
            }
        }
    }
});
$(document).keyup(function (event) {
    var tableCell = $('.mouseoverbtn').parent();
    if(tableCell.length > 0 && (event.which == 17 || event.keyCode == 17)) {
        tableCell.off('mouseenter');
        tableCell.off('mouseover');
        tableCell.find('button').hide();
    }
});

编辑：如果有几个元素有这些按钮

Answer 2

也许你只是想这样做？

var ok = false;
$(window).keydown(e){
  if(e.ctrlKey)ok = true;
});
$(window).keyup(){
  if(e.ctrlKey)ok = false;
});
$(tableCell).each(i, e){
  var t = $(e), b = t.find('button');
  t.mousedown(function(){
    if(ok)b.toggle();
  });
});

当鼠标悬停在元素上而不移动时按下按钮

2 个答案: