Question

我已经浏览过Dojo文档以及API并尝试使用Google但无法找到问题的解决方案，我希望此处的任何人都可以帮助我。

我正在尝试以编程方式创建dijit.form.select（使用Dojo 1.4）并连接到小部件的“onClick” - 事件。这是我的代码的一部分：

var dataSelect = new dijit.form.Select({
        id    : "myselect",
        name  : "myselect",
        labelAttr: "label",
        labelType: "html"
      },
      "selectid");
      dataSelect.addOption({value: "value", label: "first item label"});

      dojo.connect(dataSelect, "onClick", function() {
        alert("clicked!");
      });

它的作用：创建一个选择框，用ID“selectid”替换输入字段，创建一个选项“第一个项目标签”。万事都可以，直到这里。然后我连接到select的“onClick” - 事件，它应该通过AJAX加载更多选项（但在这个例子中只会显示一个警告用于测试）。

问题：当我点击下拉列表旁边的小箭头时，事件被触发（OK）。但是当我单击选择框本身（包含选项的区域）时，第一次单击它时不会触发事件（除非我之前单击了箭头）。当我第二次点击选择框时（以及之后每次），事件将会触发！

我尝试使用“onFocus”代替“onClick”，它确实有效，但是当第一次点击时，即使我使用“openDropDown”函数（在连接到“的onClick“！）。

是我，我遇到了Dojo错误还是一个我不知道的奇怪功能？任何帮助表示赞赏。

问候， Select0r

Answer 1

这是一个跨浏览器的解决方案：

var sizeSelect = new dijit.form.Select({
    id: "sizeSelect",
    name: "state",

    options: size,
    onChange: function(val) {
          dojo.style(dojo.byId("textInput"), {"fontSize":val});
    }
}, "sizeSelect");

Answer 2

尝试不连接到小部件本身，而是连接到它的dom节点：

dojo.connect(dataSelect.domNode, "onclick", function() {
        alert("clicked!");
      });

Answer 3

Select（扩展_HasDropDown）具有要处理的奇特代码：

鼠标按下选择小部件
鼠标移至其中一个选项
鼠标

也许这取消了点击事件。

也许你可以改为连接到_loadChildren（）。

Answer 4

此问题的根本原因是dijit._HasDropDown的_onDropDownMouseDown方法将操作dom节点，这会导致第一次初始化时onmousedown和onmouseup的e.target发生更改。

众所周知，只有当onmousedown和onmouseup的目标是同一目标时才会触发onclick事件。

因此，在这种情况下，不会触发onclick事件。

似乎在Dojo 1.5中，问题仍然存在。

Dojo：第一次点击时，dijit.form.select不会触发“onClick”事件

4 个答案: