每日一学 (JS DOM)

<!--the fist-->
<div id="demo"></div>
<script>
    let demo = document.querySelector('#demo')

    let canMove = false
    let x = 0, y = 0
    demo.onmousedown = function (e) {
        x = e.pageX - demo.offsetLeft
        y = e.pageY - demo.offsetTop
        canMove = true
    }

    demo.oncontextmenu = function (e) {
        e.preventDefault()
        console.log('右键了');
    }

    setTimeout(() => {
    }, 2000);

    window.onmouseup = function () {
        canMove = false
    }

    window.onblur = function () {
        canMove = false
    }

    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) left = maxLeft
            if (top > maxTop) top = maxTop

            demo.style.left = left + "px"
            demo.style.top = top + 'px'
        }
    }
</script>

<!--the second-->
<!--三种点击方法，来验证会不会被覆盖，也就是所谓的冒泡事件-->

<div class="demo" style="background-color: red; width: 300px; height: 300px;">
    <button class="btn">点我</button>
    <div class="shy" style="background-color: blue; width: 50px; height: 50px;"></div>
</div>

<script>
// jquery方法
// $('.demo').click(function () {
//     console.log(1111);
// })

// $('.btn').click(function () {
//     console.log(22222);
// })
// $('body').click(function () {
//     console.log(3333);
// })


// 会被覆盖
let demo = document.querySelector('.demo')
let btn = document.querySelector('.btn')
// let shy = document.querySelector('.shy')

// demo.oncontextmenu = function (e) {
//     e.preventDefault()
//     let menu = document.querySelector('.menu')
//     if (menu) menu.remove()
//     menu = document.createElement('div')
//     menu.innerHTML = 'xxxx'
//     menu.classList.add('menu')
//     document.body.appendChild(menu)
//     menu.style.left = e.pageX + 'px'
//     menu.style.top = e.pageY + 'px'
// }


// document.body.onclick = e => {

//     let menu = document.querySelector('.menu')
//     // 判断menu是否存在，或者menu中是否包含e.target
//     if (menu && !menu.contains(e.target)) menu.remove()
// }

// demo.onmouseenter = function () {
//     console.log('移入1');
// }
// demo.onmouseLeave = function () {
//     console.log('移出1');
// }
// demo.onmouseover = function () {
//     console.log('移入2');
// }
// demo.onmouseout = function () {
//     console.log('移出2');
// }

// shy.onmouseenter = function () {
//     console.log('移入1');
// }
// shy.onmouseleave = function () {
//     console.log('移出1');
// }
// shy.onmouseover = function () {
//     console.log('移入2');
// }
// shy.onmouseout = function () {
//     console.log('移出2');
// }

// btn.onclick = function (e) {
//     e.stopPropagation()
//     console.log(111111);
// }

// demo.onclick = function () {
//     console.log(22222);
// }

// document.body.onclick = function () {
//     console.log(3333);
// }


不会被覆盖
demo.addEventListener('click', function () {
    console.log(555);
})
btn.addEventListener('click', function () {
    console.log(666);
})
document.body.addEventListener('click', function () {
    console.log(777);
})
</script>