html5的drop事件，如何获取target？

<div id="DivParent">
    <div id="DivSub1"></div>
    <div id="DivSub2"></div>
    <div id="DivSub3"></div>
    <div id="DivSub4"></div>
</div>

假设这样的文档结构，我在DivParent设置了drop监听，但我希望当他drop在DivSub1范围内的时候，我能通过event对象获取到DivSub1，请问怎么解决这个问题，只考虑h5，谢谢！

阅读 5.1k

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));
}

W3c的demo
你看他的实现是在拖动开始的时候传入了ID到event中dataTransfer中

根据你的需求我在添加一个

<span style="font-family:Microsoft YaHei;font-size:10px;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box1 {
    border: green 40px solid;
    width: 300px;
    height: 300px;
    margin: auto;
}

.box2 {
    border: yellow 40px solid;
    width: 220px;
    height: 220px;
    margin: auto;
}

span {
    position: relative;
    left: 50px;
    top: 50px;
    background-color: rgba(128, 128, 128, 0.22);
}
</style>

<script type="text/javascript">
    window.onload = function() {
        document.getElementById("body").addEventListener("click",eventHandler);
        document.getElementById("box1").addEventListener("click",eventHandler);
        document.getElementById("box2").addEventListener("click",eventHandler);
        document.getElementById("span").addEventListener("click",eventHandler);
    }
    function eventHandler(event) {
        
        console.log("时间："+new Date(event.timeStamp)+" 产生事件的节点：" + event.target.id +"&nbsp; 当前节点："+event.currentTarget.id);
    }
</script>

</head>
<body id="body">
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <span id="span">This is a span.</span>
        </div>
    </div>
</body>
</html></span>

你运行下这个事件冒泡的例子应该就可以理解了

html5的drop事件，如何获取target？

你尚未登录，登录后可以

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

快开发完的Vue3项目要做SEO该如何处理？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

怎么用css 实现这个形状？

关于标签上的事件绑定生效？

安卓+h5如何传输文件引用？

在一个前端和position:absolute; position: relative;中的其他标签内容为什么出现异常？