事件

64 阅读1分钟

鼠标组止默认事件,并右击自己弹出一个菜单

<style>
        #div1{
            width: 150px;
            height: 200px;
            background-color: blue;
            position: absolute;
            left: 0px;
            top: 0px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="div1">
        <ul id="ul">
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
        </ul>
    </div>
    <script>
     let div1  = document.querySelector('#div1');
     let ul = document.querySelector('#ul');
      document.oncontextmenu = function(e){
          e.preventDefault();
          div1.style.display = 'block';
          e.clientX;
          e.clientY;
          div1.style.left=e.clientX+'px';
          div1.style.top=e.clientY+'px';
      };
      ul.onmouseover= function(){
          ul.style.background='red';
      }
      ul.onmouseout=function(){
          ul.style.background='';
      }
    </script>

键盘事件

键盘按下的时候触发onkeydown

t.onkeydown = function (){
            console.log('键盘我按下了');
         }

连续敲击的时候触发onkeypress

t.onkeypress = function (){
             console.log('连续按下键盘并抬起的时候触发');
         }

键盘抬起的时候触发onkeyup

t.onkeyup = function (){
             console.log('键盘我抬起了');
         }

顺序 onkeydown > onkeypress > onkeyup

阻止默认事件

return false 会阻止下面代码的执行,方法已经结束

 e.preventDefault() 不会阻止下面代码执行

用户界面事件onload