如果模态存在，如何取消模糊事件？答案

【问题标题】：How to cancel the blur event if a modal is present?如果模态存在，如何取消模糊事件？
【发布时间】：2014-08-25 17:14:40
【问题描述】：

我正在使用 WYSIWYG HTML 编辑器Redactor 作为内联编辑器。

当用户单击可编辑行并调用编辑器时，在模糊时，编辑器将被销毁并保存数据。

            element.bind('click', function($event) {
                element.redactor({
                    focus: true
                });
            });
            element.on('blur', function($event){
                var ckValue = element.getCode();
                scope.$apply(function () {
                    setter(scope, ckValue);
                });
                element.destroyEditor();
                compileElement();
            });

我遇到的问题是当编辑器打开一个用于上传图片的模式时。焦点更改为模态窗口。有没有办法改变/链接焦点，以便在打开模式时不会触发模糊事件？

【问题讨论】：

似乎最简单的解决方案是添加一个 if 语句...
在模糊处理程序中，检查模态是否存在，如果存在则什么也不做

标签： javascript jquery wysiwyg redactor

【解决方案1】：

您可以通过多种方式做到这一点。在这里，我想出了其中之一。当编辑器打开模式时，您只需将元素上的模糊事件取消绑定为：

element.unbind('blur');

这样就不会触发模糊事件。

并且，在关闭模态后再次将元素上的模糊事件绑定为：

element.bind('blur');

就是这样。

【讨论】：

【解决方案2】：

应该很简单：

element.on('blur', function($event) {
    if ($("#IdValueOfTheImageUploader").length < 1) {
        var ckValue = element.getCode();
        scope.$apply(function () {
            setter(scope, ckValue);
        });
        element.destroyEditor();
        compileElement();
    }
});

或者，如果上传器已经构建，但不可见，则将 if 语句更改为：

    if ($("#IdValueOfTheImageUploader:visible").length < 1) {

基本上，它会检查上传者是否存在，如果存在则跳过触发“保存和销毁”逻辑。

根据您添加图片上传器的方式，您可能还必须小心遇到比赛事件（即，图片上传器尚未加载到页面上[或者，如果使用第二个，则显示为可见）方法]，在代码检查其存在时）。您应该能够通过在切换焦点之前构建上传器来避免它，但是，如果没有，则添加超时，以使其有时间加载/显示。

【讨论】：

【解决方案3】：

我省略了一些其他需求/问题。即在窗口中调用和处理多个编辑器实例。我们需要能够在 blur 上销毁当前实例而不创建新实例。为此，我为各种编辑器组件创建了一些检查。

            // check if blur event was triggered
            // by entering editor dropdown menu
            function checkDropDisplay(){
                return $('.redactor_dropdown:hover').length > 0
            }

            // check if currently hovering over toolbar
            function checkHover(){
                return $('.redactor_box:hover').length > 0
            }

            // check if a redactor modal is present
            function checkModalDisplay(){
                return $("#redactor_modal").is(":visible")
            }

            // save editor contents upon leaving editor
            element.bind('blur', function($event){
                // get editor contents and apply to scope
                var editorValue = element.context.innerHTML;
                scope.$apply(function () {
                    setter(scope, editorValue);
                });
                // escape timeout or save & destroy editor
                $timeout(function(){
                    if(checkModalDisplay() || checkDropDisplay() || checkHover()){
                        return false;
                    } else {
                        element.data('redactor').destroy();
                        compileElement();
                    }
                },1);
            });

对于感兴趣的人，Redactor只有一系列回调事件：modalOpenCallback、dropdownshowCallback、ImageuploadcallBack。

【讨论】：