带有子输入的 Dojo ListItem答案

【问题标题】：Dojo ListItem with Child Inputs带有子输入的 Dojo ListItem
【发布时间】：2014-06-13 05:19:20
【问题描述】：

我有一个可点击的 dojo 列表项。但同时我们喜欢将输入元素放在列表项中。问题是，如果您单击子元素（例如复选框），listitem onclick 会首先拦截调用（这似乎与 html 冒泡格式相反）。所以我们不能在子元素上调用 stoppropagation 来阻止 listitem 改变页面。

在下面的示例中，您将看到列表项警报出现在复选框警报之前..

如何在不触发列表项的情况下处理列表项中的输入元素..

小提琴::http://jsfiddle.net/theinnkeeper/HFA36/1/

例如

 var list1 = registry.byId("myList");
    var item = new ListItem ({
            label: "A \"programmatic\" ListItem",
            moveTo: "#",
        noArrow:true,
            onClick : function() {
                alert("listItem clicked !" + event.target.type);
            }
        });
        list1.addChild(item);
        var check = new cb({onClick:function(){alert("checkbox clicked");event.stopPropagation();}});
        check.placeAt(item.containerNode.firstChild);
        check.startup();

【问题讨论】：

标签： dojo

【解决方案1】：

前段时间我遇到了类似的问题，并注意到dojox/mobile/ListItem 在向其添加额外的事件处理程序（复选框、触摸手势等）时并不是很好，所以为了解决这个问题，我通常扩展dojox/mobile/ListItem并自己修复事件。

例如：

var CheckedListItem = declare("dojox/mobile/CheckedListItem", [ ListItem ], {
    _initializeCheckbox: function() {
        this.checkbox = new CheckBox({

        });
        domConstruct.place(this.checkbox.domNode, this.containerNode.firstChild, "last");
        this.checkbox.startup();
        this.checkbox.onClick = this.onCheckboxClick;
    },
    onCheckboxClick: function() { },
    _setOnCheckboxClickAttr: function(handler) {
        this.onCheckboxClick = handler;
        if (this.checkbox !== null && this.checkbox !== undefined) {
            this.checkbox.onClick = handler;
        }
    },
    _onClick: function(e) {
        if (e.target !== this.checkbox.domNode) {
            this.inherited(arguments);
        }
    },
    postCreate: function() {
        this.inherited(arguments);
        this._initializeCheckbox();
    }
});

由于覆盖 _onClick() 并添加了额外的检查，我设法获得了预期的行为。

可以在此处找到完整示例：http://jsfiddle.net/LQ6Mb/

【讨论】：