按下ESC键关闭对话框后执行的对话框关闭功能(仅镀铬)

Question

我得到了一个带有某个类的div，我已经委托了一个点击事件给它，所以当它被点击时，我用另一个类切换它的类并打开一个对话框，现在当对话框关闭时，我将div类切换回原来的

现在进入有趣的部分。。。如果我按下键盘上的esc按钮，类将继续切换。。。这种情况只发生在Chrome浏览器中

复制说明：在Chrome中：点击div->对话框将打开->关闭它->开始点击esc按钮-由于对话框关闭功能正在执行，div的颜色将发生变化（它会导致div类切换）

在FF和IE中，它工作得很好，不存在esc问题

以下是js代码片段

$(document).ready(function() {
  $(document).delegate(".dashboard_widget", "click", function(){
     $(this).toggleClass('dashboard_widget').toggleClass('dashboard_widget_clicked');
     showDialog();
  });
});
function showDialog(){
    $("#dialogID").dialog({
        buttons: {
            Close: function () {
                $(this).dialog("close");
             }
        },
        close: function (event, ui) {
            $("#myID").toggleClass('dashboard_widget_clicked').toggleClass('dashboard_widget');
        }
    });
}

我在jsfiddle 中复制了它

谢谢你，

丹尼尔。

Answer 1

解决了这个问题，这要归功于Rory的想法

将.data设置为false/true，以便判断对话框何时打开/关闭

这是代码（js）的主要片段

$(document).ready(function() {
  $(document).delegate(".dashboard_widget", "click", function(){
     $(this).toggleClass('dashboard_widget').toggleClass('dashboard_widget_clicked');
     showDialog();
  });
});
function showDialog(){
    $("#myID").data('closed',false);    
    $("#dialogID").dialog({
        buttons: {
                Close: function () {
                    $(this).dialog("close");
                }
            },
        close: function (event, ui) {
            if($("#myID").data('closed')!==true){
                $("#myID").toggleClass('dashboard_widget_clicked').toggleClass('dashboard_widget');
                $("#myID").data('closed',true);
            }
        }
    });
}

jsfiddle完整解决方案

Answer 2

这是因为escape键附加到对话框的close方法。因为您已经将toggleClass连接到此方法，所以每次按键都会更改类。

当对话框未打开时，Firefox和IE似乎会忽略esc键，Chrome则不会，因此出现了问题。

如果不更改插件的代码，我认为没有什么可以解决的。