javascript - 动态创建时不出现 Ondragstart 属性

Question

我的图像位于一个数组中，我必须动态创建一个包含图像的 div，并且该图像必须具有 ondragstart 属性，但我无法使其工作。我什么都用了。

function showOptions(i,j){
var div= document.createElement("div");
var img = document.createElement("img");
var divOptions= document.getElementById('options');

div.id = "div"+i+j;
img.src = imgArray[i][j].src;
div.className="options";

img.draggable= true;

img.ondragstart="dragStart_handler(event)";

divOptions.appendChild(div);
div.appendChild(img);

这是 html 部分:

<div id='options'> <!-- Here should be the divXX and the img --> </div>

我还使用了方法addEventListener 和attachEvent。但似乎没有任何作用。我可以用其他方式将 div 和图像写入 HTML 吗？

Answer 1

这个作业不好:

img.ondragstart="dragStart_handler(event)";

您正在将一个字符串分配给需要函数的属性。

这应该有效:

img.ondragstart = dragStart_handler;

这样更好:

img.addEventListener("dragstart", dragStart_handler); // note: no "on"

<小时/>

我认为您混淆了在 HTML 中编写一些 JavaScript 的便捷语法，例如:

<img ondragstart="dragStart_handler(event);" />

我认为您还可以将字符串传递到 setTimeout 等函数中:

setTimeout("dragStart_handle", 100);

这是可行的，因为 JavaScript 需要一个函数，并且会评估字符串参数。

我会避免这个语法。