Javascript 如何在小部件上设置HTML5事件？

使用我想将一个小部件拖到另一个小部件上（它们是兄弟小部件）

我将draggable属性添加到我想要像这样拖动的元素中

<div draggable="true" id="textbox" >

return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

    templateString: template,

    allowDrop: function (ev) {
        alert("test");
        ev.preventDefault();
    },
    ....
  }

<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        //ev.target.appendChild(document.getElementById(data));
    }
</script>

    startup: function () {
        this.inherited(arguments);

        var that = this;

        on(dom.byId("canvas"), "dragover", function (event) {
            that.allowDrop(event);

        });

    }

当鼠标进入小部件区域并尝试触发allowDrop事件时，我得到的错误如下

未捕获引用错误：未定义allowDrop

编辑

如果像这样在index.html的脚本标记中包含函数，那么一切都可以正常工作

<div draggable="true" id="textbox" >

return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

    templateString: template,

    allowDrop: function (ev) {
        alert("test");
        ev.preventDefault();
    },
    ....
  }

<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        //ev.target.appendChild(document.getElementById(data));
    }
</script>

    startup: function () {
        this.inherited(arguments);

        var that = this;

        on(dom.byId("canvas"), "dragover", function (event) {
            that.allowDrop(event);

        });

    }

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
//ev.target.appendChild（document.getElementById（数据））；
}

使用

数据dojo attach event

绑定事件并调用小部件范围内的函数

<div data-dojo-attach-event= "ondragover:allowDrop(event)">
    <div id="canvas"   class="grid container">
        <div style="color:red"  data-dojo-attach-point="canvasNode"></div>
    </div>
</div>

---

如果这不起作用，请尝试使用事件名称的camel casing。

从HTML中删除事件属性，而是在启动或后期创建中使用dojo/on以编程方式附加事件，如下所示

<div draggable="true" id="textbox" >

return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

    templateString: template,

    allowDrop: function (ev) {
        alert("test");
        ev.preventDefault();
    },
    ....
  }

<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        //ev.target.appendChild(document.getElementById(data));
    }
</script>

    startup: function () {
        this.inherited(arguments);

        var that = this;

        on(dom.byId("canvas"), "dragover", function (event) {
            that.allowDrop(event);

        });

    }