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

发布于 2022-09-01 19:45:58 字数 348 浏览 21 评论 0

<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，谢谢！

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南街女流氓 2022-09-08 19:45:58

你在父元素 DivParent 上绑定监听器，那么
event.target 指向 DivSub1 元素（当然确定是拖入该元素上）
event.currentTarget 才会指向 DivParent 父元素

回复收藏 0

那支青花 2022-09-08 19:45:58

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 +"  当前节点："+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>

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

回复收藏 0

~没有更多了~