有没有办法停止 dojo onBlur 事件处理程序中的所有其他事件？

Question

也许我走错了路……

设置： 我有一个相当复杂的完整的 dojofied Web 应用程序。这个问题的重要部分是在dijit.layout.BorderContainer 的中心区域有一个较长的表格，在其他区域有导航树和一些操作按钮。

我想做的事： 如果用户确实输入了数据但没有保存，如果他要离开表单，他们应该会收到一条警告消息（如果他离开，点击“新元素”按钮，...）。为了获得更好的用户体验，我想提供一个带有“保存”、“无论如何离开”、“取消”选项的模式对话框。 可能的想法是使用表单的 onBlur 事件，停止所有其他事件（很可能是某个其他小部件上的 onClick），检查更改，如果有更改，则显示对话框，否则让其他事件继续。 我不想为所有非表单活动元素添加 checkChanges 方法！

对于第一次测试，我只是试图阻止事件...

这行得通

<div id="formArea" dojoType="dijit.form.Form" encoding="multipart/form-data" action=""  class="ContentPane" region="center">
   <script type="dojo/connect" event="onBlur" >
      alert("I don't think so");
    </script>
 </div>

...但它很难看，我不能轻易继续

这不是

<div id="formArea" dojoType="dijit.form.Form" encoding="multipart/form-data" action=""  class="ContentPane" region="center">
   <script type="dojo/connect" event="onBlur" args="e">
      console.log("blur"); // ok
      e.preventDefault();//event.stopt(e)//return false //<--neither of these
    </script>
 </div>

问题是，如果我点击表单外的按钮，onBlur 会触发，但我无法停止按钮上的onClick。 我知道 onBlur 不提供事件对象 - 所以 e.something 不能真正工作...... 有什么办法可以捕捉到另一个元素上的onClick？

Answer 1

Pause button event listener(s) 在表单的onBlur 中（如果未保存数据）。

查看实际操作：http://jsfiddle.net/phusick/A5DHf/

你有一些按钮事件监听器，通过on.pausable(node, event, callback)而不是on()注册它们：

var b1Handler = on.pausable(button1Node, "click", function() {
    console.log("b1.onClick");        
});

var b2Handler = on.pausable(button2Node, "click", function() {
    console.log("b2.onClick");        
});

将处理程序收集到一个数组中：

var handlersToPause = [b1Handler, b2Handler];

添加onBlur事件监听器：

on(form, "blur", function(e) {

    if (this.isDirty()) {
        // if data are not saved, pause button event listeners
        handlersToPause.forEach(function(handler) {
            handler.pause();
        });
        // display modal dialog here     
    }            
});

添加例如onFocus事件监听器恢复按钮事件监听器：

on(form, "focus", function(e) {
    handlersToPause.forEach(function(handler) {
        handler.resume();            
    });
});

请注意，handler.pause() 正在暂停 onclick 侦听器，而不是事件。 onclick 事件在Event queue 中等待，因此在onblur 的执行时间内无法访问。

我会制定一些更强大的解决方案，但这很快就能回答您的问题。不管怎样，看看dojo/aspect 和它的around advice 来调用你的checkChanges，而不需要改变所有非表单的活动元素。

Answer 2

只有 confirm('question?') 会像这样“死锁”你的页面事件。

我已经做了一个类似的设置，但我解决这个问题的方式（除非用户在地址栏中输入 url 并按回车键）是每当单击导航树时弹出对话框，将用户发送到新视图。考虑：

----------------------------------------
| Nav 1  |   Asset1 ( view controller )  |
| Nav 2  |   Asset2 ( hidden )           |
----------------------------------------

Nav 1 是默认的加载视图，资产 1 已加载，包含“设置页面”表单或类似表单，并且可以更改。诀窍是，Asset1 和 Asset2 是从 AbstractAsset 派生的，而 AbstractAsset 又是一个简单的 ContentPane 扩展。

在 AbstractAsset 中是一个名为 isDirty 的“必须覆盖功能”函数

var Viewcontroller = declare("AbstractAsset", [dijit.ContentPane], {
       isDirty: function() { return false; }
});


declare("Asset1", [Viewcontroller], {

startup: function() {
  // sets up form
  ...
  // and references inputfields to 'this'
  this.inputfields = this.form.getChildren();

  // and saves (clones) the state of each field
  var self = this;
  this.inputfields.forEach(function(inputWidget) {
     self.states[inputWidget.id] = inputWidget.get("value");
  });
},
isDirty: function() {
  var self = this;
  var dirty = false;
  this.form.getChildren().some(input) {
     if(self.states[input.id] != input.get("value")) {
        dirty = true;
        return false; // breaks .some loop
     }
     return true;
  });
  return dirty;
}

})

然后，每次导航点击都必须调用当前可见的视图控制器的 isDirty 函数才能继续。假设用户单击导航树 (dijit.Tree) 行节点 Nav 2。

var navigation = dojo.declare("NavigationController", [dijit.Tree], {
 currentView : null,
 onLoad: function() {
   // start Asset1 in viewNode by default
   this.currentView = new Asset1({ }, this.viewNode); 
 },
 onClick : function() {
    if(this.currentView.isDirty()) alert("I Dont Think So");
    else {
       this.loadFunction(this.model.selection.getSelected());
    }
 }

});

这是实现卸载检查的一般思路，您需要通过“主应用程序控制器”挂钩任何 onClick 事件以确定应该发生什么。 Check this application 用作 cms 导航控制器，page.js:587 用于 isDirty 示例