Dojo class 事件侦听器在后续实例化时消失

Question

我有一个名为 Draggable 的简单 class，它有一个 Moveable 和一个点击事件侦听器：

define([
'dojo/dom',
'dojo/query',
'dojo/dom-style',
'dojo/dnd/Moveable',
'dojo/_base/declare'
], function(
dom,
query,
domStyle,
Moveable,
declare
){
return declare(null, {
    constructor: function(id){
        this.id = id;
        dom.byId('draggables').innerHTML +=
            '<div id="' + id + '" style="width: 100px; height: 100px; border: 1px solid #000;"></div>';
        this.moveable = new Moveable(id, {
            handle: dom.byId(id)
        });
        query('#' + id).on('click', function(){ console.log(id); });
    }
});
});

在主 HTML 文件 index.html 中，我简单地创建了两个 Draggable 实例，A 和 B：

<script>
require([
'dojo',
'dojo/query',
'extras/Draggable'
], function(
query,
Draggable
){
var a = new Draggable('A');
var b = new Draggable('B');
});
</script>

如果我单独创建了 Draggable A（没有创建 Draggable B），我可以拖动 Draggable A，每当我点击它时，控制台都会按预期记录 "A"。

但是，一旦我创建了 Draggable A 和 B（如代码所示），只有 Draggable B 可以拖动，只有当我点击 Draggable B 时，控制台才会显示 "B"。似乎在创建 Draggable B 的那一刻，Draggable A 失去了它的 Moveable 和它的事件侦听器！

Answer 1

嗯，你最好走另一条路。可移动 class 设计，因此您不能将其用作小部件中的混合。它的构造函数需要一个节点作为参数，而模板化的小部件此时没有节点，除了 srcNodeRef，如果它被传递的话。

因此，我建议您执行以下操作：

1 创建没有 Movable 的模板化小部件 class。如果需要，附加事件侦听器。如果您正确使用 data-dojo-attach-event 属性或您喜欢的任何其他方式，它将开箱即用而不会发生任何冲突。小部件的代码可能如下所示：

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin"
], function (
    declare,
    _WidgetBase,
    _TemplatedMixin
) {
    "use strict";
    return declare("Draggable", [_WidgetBase, _TemplatedMixin], {
        templateString: "<div data-dojo-attach-event='click: clickHandler' style='width: 100px; height: 100px; border: 1px solid #000'>draggable div</div>",
        clickHandler: function (e) {
            console.log("Clicked:", this.id, e);
        }
    });
});

2 您将在页面的某处创建小部件并使其可移动，例如：

    <script>
        require(["dojo/dnd/Moveable", "Draggable"], function (Movable, Draggable){
            let d1 = new Draggable();
            d1.placeAt("myContainer");

            let d2 = new Draggable();
            d2.placeAt("myContainer");

            let m1 = new Movable(d1.domNode);
            let m2 = new Movable(d2.domNode);

        });
    </script>

    <div id="myContainer"></div>

我已经测试过了，它对我有用。希望对你有帮助；

Dojo class 事件侦听器在后续实例化时消失

Dojo class event listener disappears upon subsequent instantiation

events

dojo