DOM 小练习

DOM 小练习2

生活场景：设置自定义的右键单击菜单栏

实现思路： 1.阻止浏览器默认右键单击菜单栏事件 e.stopPropagation()

2.创建自定义菜单节点，添加到body中，并写入css且要加入定位

3.清除多余菜单栏，且在创建菜单节点之前

4.在window中 点击除了菜单栏以外的地方，菜单栏消失。

代码如下：

 <style>
        .demo {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    .menu {
            width: 50px;
            height: 80px;
            background-color: pink;
            position: absolute;
        }
     
     
 <style/>





<script>
demo.oncontextmenu = function (e) {
            e.preventDefault()
            let menu = document.querySelector('.menu')
            if (menu) menu.remove('.menu')
            menu = document.createElement('div')
            menu.classList.add('menu')
            menu1 = document.createElement('div') 
            menu.appendChild(menu1)
            menu.innerHTML = 'xxxxxx'
            document.body.appendChild(menu)
            menu.style.left = e.pageX + 'px'
            menu.style.top = e.pageY + 'px'



        }
window.onclick = function(e){
    let menu = document.querySelector('.menu')
    if(menu&&!menu.contains(e.target)){
        menu.remove()
    }
}
<script/>