javascript - 如何修复鼠标悬停删除按钮，以便我们可以通过键盘删除它？

Question

正如您在图片中看到的选项卡欢迎，警报等。现在如果选项卡未被选中，那么只有我们可以删除选项卡并且删除按钮只会在鼠标悬停时出现。现在我的问题是我想在那里修复它以便我可以使用键盘删除它？ (这里选择了欢迎选项卡，因此我们可以删除任何选项卡)。这是一个可访问性问题。

CSS 代码:

.js .delete-tab {
background: url(../images/common/remove.png) no-repeat 42%;
cursor: pointer;
display: block;
height: 8px;
position: absolute;
right: 2px;
text-indent: -9999em;
top: 2px;
width: 8px; }

JavaScript:

_deleteButton: function(obj) {
        var instance = this;

        obj.append('<span class="delete-tab">X</span>');

        var deleteTab = obj.find('.delete-tab');

        deleteTab.click(
            function(event) {
                instance._removePage(this);
            }
        );

        deleteTab.hide();

        obj.hover(
            function() {
                jQuery(this).find('.delete-tab').fadeIn('fast');
            },
            function() {
                jQuery(this).find('.delete-tab').fadeOut('fast');
            }
        );
    },

Answer 1

好吧，一种快速而肮脏的方法是将 KeyUp 事件绑定(bind)到文档主体，并监听删除键(或您想到的任何键)。IE。在 obj.hover 的“hover-in”状态下绑定(bind)，在“hover-out”状态下解除绑定(bind)。

编辑，添加示例:

//Add this method somewhere in you code
function getDeleteBtn(e){
    if(e.which == 46) //46 == delete btn
        alert('delete');
}

obj.hover(
    function(){
        //Add this....
        $('body').bind('keyup', getDeleteBtn);
    },
    function(){
        //And this to your hover statement
        $('body').unbind('keyup', getDeleteBtn); 
    }
);

一个快速的 fiddle :http://jsfiddle.net/grgKm/