鼠标组止默认事件,并右击自己弹出一个菜单
<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