Js键盘事件与默认行为
2017-03-28 本文已影响248人
我拥抱着我的未来
键盘事件主要是就是2个
onkeydown
e.keyCode:数字类型，键盘按键的值,键值(同样功能的按键,键值一样，例如左侧的ctrl和右侧的ctrl键值相同)
- ctrlKey,shiftKey,altKey事件对象的三个属性都是布尔值
例如 e.ctrlKey == true
- 如果按下不抬起来，则会连续触发
- onkeydown事件触发是在input值获取到之前触发,所以必须利用的是onkeyup
document.onkeydown = function(ev){
window.alert(ev.keyCode);
}
document.onclick = function(e){
window.alert(e.ctrlKey);//当按下ctrl点击的时候，弹出true,当没有按下ctrl点击的时候，弹出false
}
onkeyup
当键盘抬起的时候触发
//一般情况用于清空
元素.onkeydown = null;
举例说明:留言板
//按下ctrl+回车键开始
document.onkeydown = function(e)
{
if(e.ctrlKey&&e.keyCode==13) //判断是不是回车
{
hexin();
}
}
第二个例子键盘控制div移动
function getStyle(obj,attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
document.onkeydown = function(e){
switch(e.keyCode)
{
case 37:
if(parseInt(getStyle(document.getElementById("div1"),"left"))==0)
{
window.alert("到头了，不能动了");
}else
{
document.getElementById("div1").style["left"] = (parseInt(getStyle(document.getElementById("div1"),"left"))-10)+"px";
}
break;
case 38:
if(parseInt(getStyle(document.getElementById("div1"),"top"))==0)
{
window.alert("到头了，不能动了");
}else
{
document.getElementById("div1").style["top"] = (parseInt(getStyle(document.getElementById("div1"),"top"))-10)+"px";
}
break;
case 39:
if(parseInt(getStyle(document.getElementById("div1"),"left"))>=(parseInt(document.documentElement.clientWidth)-300))
{
window.alert("到头了，不能动了");
}else
{
document.getElementById("div1").style["left"] = (parseInt(getStyle(document.getElementById("div1"),"left"))+10)+"px";
}
break;
case 40:
if(parseInt(getStyle(document.getElementById("div1"),"top"))>=(parseInt(document.documentElement.clientHeight)-300))
{
window.alert("到头了，不能动了");
}else
{
document.getElementById("div1").style["top"] = (parseInt(getStyle(document.getElementById("div1"),"top"))+10)+"px";
}
break;
}
}
不是所有的元素都能接受键盘事件，能够响应用户输入的元素才可以，能够接受焦点元素就能够接受键盘事件
事件的默认行为
事件默认行为:当一个事件发生时浏览器自己会做的事情。
阻止默认行为的步骤:
- 当前这个行为是什么事件触发的
- 在这个事件的处理函数中使用return false;
<a href="javascript:void(0)" target="_blank" onclick="dianji()">点击后跳转</a>
<script>
function dianji(){
window.alert("不会跳转");
}
</script> //这样的话他不会跳转
默认情况点击空格，滚动条会向下滚动
document.onkeydown = function(){
return false; //这样就阻止了点击空格，向下滚动
}
document.oncontextmenu = function(){
//alert(1);
return false;
}
oncontextmenu右键菜单事件,当右键菜单显示出来的时候触发
自定义右键菜单
<style>
*{margin:0px;padding:0px;}
#div1 {width: 100px; height: 200px; border: 1px solid red; position: absolute;left:0px;top:0px; display: none;}
</style>
<body>
<div id="div1"></div>
<script>
var div1 = document.getElementById("div1");
document.oncontextmenu = function(e){
e = e||event;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; //为了兼容性
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //为了兼容性
div1.style["left"] = (scrollLeft+e.clientX)+"px";
div1.style["top"] = (scrollTop+e.clientY)+"px";
div1.style["display"] = "block";
return false;
}
//消除
document.onclick = function(){
div1.style["display"] = "none";
}
document.onkeydown = function(){
div1.style["display"] = "none";
}
</script>
</body>
