我正在阅读这个关于拖放的 w3 学校代码，有点困惑。代码中的“目标”是什么意思(我希望它一定是可放置的元素)。
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(“drag1”) 将拖动的元素追加到放置元素中
最佳答案
target 是指触发事件的元素。
A reference to the object that dispatched the event. It is different from event.currentTarget when the event handler is called during the bubbling or capturing phase of the event.
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
打开控制台并检查输出，
阅读 Material
关于javascript - target在HTML元素拖放中是什么意思，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46034387/