Question

第一篇文章 - 轻松一点。

我试图在javascript中创建一个与其具有相同效果的eventListener 下面的ondrop函数：

<tr 
    id=rw01 
    draggable=true
    ondragstart=drag(event);
    ondrop=drop(event,this);
>some HTML</tr>

javascript看起来像这样：

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

function drop(ev,r) {
    ev.preventDefault();
    var oldRowID = ev.dataTransfer.getData('id');
    var newRowNo = r.rowIndex;
    var tbl = document.getElementById('main');
    newRow = tbl.insertRow(newRowNo);
    oldRow = document.getElementById(oldRowID);
    newRow.innerHTML = oldRow.innerHTML;
    newRow.id = oldRowID;
    newRow.draggable = true;
    newRow.addEventListener('dragstart',drag(event));
    newRow.addEventListener('drop', function() {
             drop(event,newRow);
        } );
    oldRowNo = oldRow.rowIndex;
    tbl.deleteRow(oldRowNo);
}

我得到的错误是当新创建的行上的ondrop事件调用drop函数时。这条线

 var oldRowID = ev.dataTransfer.getData('id')

不返回任何内容 - 表示drag事件未将元素id传递给drop函数。

从html调用的所有函数都运行正常 - 新创建的事件处理程序调用的函数不起作用。

提前致谢。

Answer 1

您不需要明确传递事件参数。而只是下面的代码：

newRow.addEventListener('dragstart',drag);

并且drag（）函数将与您定义的相同。

现在你定义的drop（）函数应该只有event参数：

function drop(ev) {

}

您可以使用this对象来访问当前对象。

因此，在为代码添加新添加的行时使用drop事件侦听器：

newRow.addEventListener('drop',drop);

还可以使用以下HTML标记：

<tr 
    id=rw01 
    draggable=true
    ondragstart=drag();
    ondrop=drop();
>some HTML</tr>

希望这有帮助。

Javascript动态创建包含事件和此参数的eventListener

1 个答案: