Question

我正在阅读这个W3学校的代码，拖放时有点困惑。＆＃34;目标＆＃34;在代码意味着（我希望它必须是可丢弃的元素）。 ev.dataTransfer.setData("text", ev.target.id); //在这一行中，提到ev.target.id是可拖动元素的值......但是这里

ev.target.appendChild（的document.getElementById（数据））; //可拖动元素（数据）的值被附加到ev.target，它必须是符合语法的可丢弃元素。如果我错了，请解释一下。

https://www.w3schools.com/html/html5_draganddrop.asp

<!DOCTYPE HTML>
<html>
<head>
<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>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>
</html>

代码解释：

调用preventDefault（）以防止浏览器默认处理数据（默认为打开时链接打开）使用dataTransfer.getData（）方法获取拖动的数据。此方法将返回在setData（）方法中设置为相同类型的任何数据拖动的数据是拖动元素的id（＆＃34; drag1＆＃34;）将拖动的元素追加到drop元素

Answer 1

target指的是触发事件的元素。

对调度事件的对象的引用。在事件的冒泡或捕获阶段调用事件处理程序时，它与event.currentTarget不同。

<强> HTML

<div id="test">Click Me!</div>

<强>的JavaScript

document.getElementById('test').addEventListener('click', function (e) {
    var id = e.target.id;

    console.log(id);
    console.log(e.target);
});

<强>输出

<强>的jsfiddle

打开控制台并检查输出

Live Example

阅读材料

Event.target

目标在HTML元素的拖放中意味着什么

1 个答案: