Question

我有一个特定类的div，我已经委派了一个click事件，所以当它被点击时我将其类与另一个类切换并打开一个对话框，现在当对话框关闭时我切换div类回到原来的

现在到了有趣的部分...如果我按下键盘上的esc按钮，类继续切换......这只发生在Chrome浏览器中

重现说明：在Chrome中：点击div - ＆gt;将打开一个对话框 - ＆gt;关闭它 - ＆gt;开始按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');
        }
    });
}

I reproduced it in 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 Full Solution

Answer 2

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

当对话框未打开时，Firefox和IE似乎忽略了esc按键，Chrome没有，因此问题。

在不更改插件代码的情况下，我不认为可以做很多工作来解决这个问题。

在按ESC键关闭对话框后执行对话框的关闭功能（仅限铬）

2 个答案: