原生JS中的拖拽事件兼容性问题
写个小Demo，分享一下使用原生JS实现拖拽时的兼容性问题如何解决？代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS中的拖拽事件兼容性问题</title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function (ev) {
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
//如果是IE浏览器
if (oDiv.setCapture) {
oDiv.onmousemove = fnMove;
oDiv.onmouseup = fnUp;
//针对IE浏览器，把所有的鼠标事件放到oDiv上面处理
oDiv.setCapture();
} else {
document.onmousemove = fnMove;
document.onmouseup = fnUp;
}
function fnMove(ev) {
var oEvent = ev || event;
oDiv.style.left = oEvent.clientX - disX + 'px';
oDiv.style.top = oEvent.clientY - disY + 'px';
}
function fnUp() {
this.onmousemove = null;
this.onmouseup = null;
//鼠标抬起时，释放setCaptrue事件
//以免其它操作时，拖拽对象还在移动
if (this.releaseCapture) {
this.releaseCapture();
}
}
//防止个别浏览器下拖拽时选中其它文字
return false;
};
};
</script>
</head>
<body>
<span></span>
<div id="div1"></div>
<span></span>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/08/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
