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需要一个函数，并且eval是字符串参数。

我会避免这种sytnax。

Answer 2

img.setAttribute("ondragstart", "dragStart_handler(event)");

如果这对你有用，请告诉我。适用于我而img.ondragstart没有。

动态创建时不会出现Ondragstart属性

2 个答案: