dojo/on:事件中的冲突

dojo/on:事件中的冲突,dojo,Dojo,嗨,我不熟悉如何暂停和恢复活动。 我想暂停dijit/select的toggleDropDown方法并继续它。 我也有两个按钮,用于暂停和恢复,并触发选择的下拉操作。 我在dojo上读过一篇文章,但它让我感到困惑。 请看下面我的脚本 <script> require([ "dojo/ready", "dojo/_base/fx", "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”,那么您的代码应该可以工作