chrome下的拖放事件

最新推荐文章于 2024-02-18 08:09:58 发布

weixin_33722405

最新推荐文章于 2024-02-18 08:09:58 发布

阅读量429

点赞数

原文链接：https://juejin.im/post/5bbc170ee51d450e8c351f09

版权

最近在看h5拖放事件，发现一个有趣的现象，chrome下的拖放事件和别的浏览器有点不同。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.container{
			width: 200px;
			height: 200px;
			background: #ff0;
		}
		.drag{
			width: 100px;
			height: 100px;
			background: pink;
		}
	</style>
</head>
<body>
	<div class="container" id="container"></div>
	<div class="drag" id="drag" draggable=true></div>

	<script>
		var drag = document.querySelector('#drag');
		var container = document.querySelector('#container');
		container.addEventListener('dragenter',function(evnet){
			console.log('enter')
		})
		container.addEventListener('dragover',function(evnet){
			console.log('over')
		})
		container.addEventListener('drop',function(evnet){
			console.log('drop');
		})
		container.addEventListener('dragleave',function(evnet){
			console.log('leave')
		})
	</script>
</body>
</html>复制代码

在chrome下，如果鼠标放在拖动元素的上半部分，不管鼠标往哪个方向移动，都会触发目标元素的dragenter和dragleave事件。看下图

鼠标放在粉红色div的上半部分，无论往哪个方向拖动元素都会触发上面黄色div的dragenter和dragleave事件，而不管鼠标是否进入了黄色的div。正常情况应该是鼠标进入黄色div才会触发dragenter事件。对于这个现象，谁有合理解释吗？还是这是个bug？

转载于:https://juejin.im/post/5bbc170ee51d450e8c351f09

weixin_33722405

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
chrome下的拖放事件

最近在看h5拖放事件，发现一个有趣的现象，chrome下的拖放事件和别的浏览器有点不同。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style> *{ margin...
复制链接

扫一扫