js DOM练习

 <style>
* {
padding: 0;
margin: 0;
}
.demo {
width: 300px;
height: 300px;
background-color: #DD5246;
position: absolute;
}
</style>
<div class="demo"></div>
<script>
let canMove = false;
var demo = document.querySelector('.demo')
let x = 0, y = 0;
demo.onmousedown = function (e) {
x = e.pageX - demo.offsetLeft;
y = e.pageY - demo.offsetTop;
canMove = true;
}
window.onblur = function () {
canMove = false;
}
window.onmouseup = function () {
canMove = false;
}
demo.oncontextmenu = function (e) {
e.preventDefault()//阻止默认行为
console.log('邮件里');
}
window.onmousemove = function (e) {
e.preventDefault()//阻止默认行为
if (canMove) {
let left = e.pageX - x
let top = e.pageY - y
if (left < 0) left = 0
if (top < 0) top = 0
let maxLeft = window.innerWidth - demo.offsetWidth
let maxTop = window.innerHeight - demo.offsetHeight
if (left > maxLeft) let = maxLeft
if (top > maxTop) top = maxTop
demo.style.left = left + 'px'
demo.style.top = top + 'px'
}
}
</script>

最后

以上就是单身荷花为你收集整理的js DOM练习的全部内容，希望文章能够帮你解决js DOM练习所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。