dojo/on：事件中的冲突

嗨，我不熟悉如何暂停和恢复活动。 我想暂停dijit/select的toggleDropDown方法并继续它。 我也有两个按钮，用于暂停和恢复，并触发选择的下拉操作。 我在dojo上读过一篇文章，但它让我感到困惑。 请看下面我的脚本

<script>
        require([   "dojo/ready",
                    "dojo/_base/fx",
                    "dojo/on", 
                    "dojo/dom",
                    "dijit/TitlePane",
                    "dijit/form/Select",
                    "dojo/_base/window",
                    "dijit/form/Button",
                    "dojo/domReady!"
                ], function(ready, fx, on, dom, titlepane, select, win, Button) 
        {
                 ready(function()
                 {
                    var toggle = true;

                    var myButton = new Button
                    ({
                        label: "Toggle Select Events",
                        onClick: function()
                        {
                            if(toggle)
                            {
                                //true
                                selectTowns.pause();
                                toggle = false;
                            }
                            else
                            {
                                //false
                                selectTowns.resume();
                                toggle = true;
                            }

                        }
                     }, "progButtonNode");

                    var myButton1 = new Button
                    ({
                        label: "Trigger drop down",
                        onClick: function()
                        {
                            selectTowns.toggleDropDown();
                        }
                    }, 'dropButtonNode'); 

                    var selectTowns = new select
                    ({
                        name: "select2",
                        options: [
                        { label: "Tennessee", value: "Tennessee" },
                        { label: "Virginia", value: "Virginia", selected: true },
                        { label: "Washington", value: "Washington" },
                        { label: "Florida", value: "Florida" },
                        { label: "California", value: "California" }
                        ]
                    }).placeAt(win.body());

                    on.pausable(selectTowns, "click", clickHandle);

                 });
        });
    </script>

需要（[“dojo/ready”，
“dojo/_base/fx”，
“dojo/on”，
“dojo/dom”，
“dijit/TitlePane”，
“dijit/form/Select”，
“dojo/_基地/窗口”，
“dijit/form/Button”，
“dojo/domReady！”
]，功能（就绪、fx、on、dom、标题栏、选择、赢、按钮）
{
就绪（函数（）
{
var-toggle=true；
var myButton=新按钮
({
标签：“切换选择事件”，
onClick:function（）
{
如果（切换）
{
//真的
选择towns.pause（）；
切换=假；
}
其他的
{
//假的
选择towns.resume（）；
切换=真；
}
}
}，“progButtonNode”）；
var myButton1=新按钮
({
标签：“触发器下拉列表”，
onClick:function（）
{
选择Towns.toggleDropDown（）；
}
}，“dropButtonNode”）；
var selectTowns=新选择
({
名称：“选择2”，
选项：[
{标签：“田纳西”，价值：“田纳西”}，
{标签：“Virginia”，值：“Virginia”，选中：true}，
{标签：“华盛顿”，价值：“华盛顿”}，
{标签：“佛罗里达”，值：“佛罗里达”}，
{标签：“加利福尼亚”，值：“加利福尼亚”}
]
}).placeAt（win.body（））；
打开。可暂停（选择城镇，“单击”，单击手柄）；
});
});

请告知 谢谢

---

Clement

on.pausable调用返回您需要的处理程序。您还必须在on.pausable方法中将clickHandle定义为函数，如下所示：

var selectHandler = on.pausable(selectTowns, "click", function(evt) {
    console.log("your handler code here");
});

该处理程序用于pause（）和resume（）方法，而不是选择框：

if ( toggle ) {
    // true
    selectHandler.pause();
    toggle = false;
} else {
    // false
    selectHandler.resume();
    toggle = true;
}

所有这些加在一起：

require([   
         "dojo/ready",
            "dojo/_base/fx",
            "dojo/on", 
            "dojo/dom",
            "dijit/TitlePane",
            "dijit/form/Select",
            "dojo/_base/window",
            "dijit/form/Button",
            "dojo/domReady!"
        ], 
        function(ready, fx, on, dom, titlepane, select, win, Button) 
        {
         ready(function()
         {
            var toggle = true;

            var myButton = new Button
            ({
                label: "Toggle Select Events",
                onClick: function()
                {
                    if(toggle)
                    {
                        //true
                        selectHandler.pause();
                        toggle = false;
                    }
                    else
                    {
                        //false
                        selectHandler.resume();
                        toggle = true;
                    }

                }
             }, "progButtonNode");

            var myButton1 = new Button
            ({
                label: "Trigger drop down",
                onClick: function()
                {
                    selectTowns.toggleDropDown();
                }
            }, 'dropButtonNode'); 

            var selectTowns = new select
            ({
                name: "select2",
                options: [
                { label: "Tennessee", value: "Tennessee" },
                { label: "Virginia", value: "Virginia", selected: true },
                { label: "Washington", value: "Washington" },
                { label: "Florida", value: "Florida" },
                { label: "California", value: "California" }
                ]
            }).placeAt(win.body());

            var selectHandler = on.pausable(selectTowns, "click", function(evt) {
                console.log("pausable click");
            });

         });
    });

---

如果我理解您试图正确执行的操作，那么您的代码应该是这样的：

require(["dojo/ready",
    "dojo/_base/fx",
    "dojo/on",
    "dojo/dom",
    "dijit/TitlePane",
    "dijit/form/Select",
    "dojo/_base/window",
    "dijit/form/Button",
    "dojo/domReady!"], function (ready, fx, on, dom, titlepane, select, win, Button) {
    ready(function () {
        var toggle = true;

        var myButton1 = new Button({
            label: "Trigger drop down"
        }, 'dropButtonNode');

        var selectTowns = new select({
            name: "select2",
            options: [{
                label: "Tennessee",
                value: "Tennessee"
            }, {
                label: "Virginia",
                value: "Virginia",
                selected: true
            }, {
                label: "Washington",
                value: "Washington"
            }, {
                label: "Florida",
                value: "Florida"
            }, {
                label: "California",
                value: "California"
            }]
        }).placeAt(win.body());

        var buttonHandler = on.pausable(myButton1, "click", function() {
            selectTowns.toggleDropDown();
        });

        var myButton = new Button({
            label: "Toggle Select Events",
            onClick: function () {
                if (toggle) {
                    //true
                    buttonHandler.pause();
                    toggle = false;
                } else {
                    //false
                    buttonHandler.resume();
                    toggle = true;
                }

            }
        }, "progButtonNode");

    });
});

或者看看我在这里做的小提琴：

---

我认为您错过的第一件事是“暂停”和“恢复”是指dojo/on模块返回的处理程序（在我的示例中，它是buttonHandler）。返回的处理程序可以暂停或恢复。

您好，谢谢您的帮助。难怪它与事件的处理程序有关。但它似乎在var-selectHandler声明方面存在问题。这是“点击手柄”。所以我改为“clickHandler”。同样，它不起作用。错误说明：“ReferenceError:clickHandler未定义”。@user1739825您可能需要将selectHandler（或clickHandle）设置为全局变量。改为调用window.clickHandler，然后调用window.clickHandler.pause（）和window.clickHandler.resume（）。@user1739825我编辑了答案以显示我的意思。再次感谢。我根据上面更改的解决方案进行了更改。错误仍然是一样的：-“ReferenceError:clickHandle未定义”和“ReferenceError:clickHandler未定义”@user1739825我发现您需要将clickHandle设置为一个函数，如新编辑的答案所示。即使在单击选择框时不执行任何操作，on.pausable仍然需要一个。如果我更改为“var buttonHandler=on.pausable（selectTowns，“change”，function（）{selectTowns.toggleDropDown（）；selectTowns.focus（）；}”）；”。这样行吗？恢复selectTowns事件后，如果select发生更改，则似乎没有响应。请查看没有更改事件触发的原因，因为您的存储数据只有“标签”和“值”。Dojo的Select小部件在选择具有不同“id”的选项时读取。如果您将所有的“值”更改为“id”，或者只是向存储中的每个对象添加一个“id”，那么您的代码应该可以工作