javascript之键盘与鼠标事件

最新推荐文章于 2023-12-29 16:33:57 发布
原创 最新推荐文章于 2023-12-29 16:33:57 发布 · 1k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文将深入探讨JavaScript中的键盘和鼠标事件，包括如何监听键盘按键和鼠标点击，以及相关事件处理函数的使用，帮助你更好地理解和应用这些基础但重要的交互功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第十章  键盘和鼠标事件处理
键盘和鼠标事件处理功能非常强大，在网页设计中经常用到。这一章将介绍相关的内容。
10.1事件处理
在本节给出一个例子，当用户在Web页面中单击鼠标左键时，程序要能够报告鼠标所在的位置，当和户释放鼠标键时，需要报告鼠标键已经弹起，如果用户在按下三个功能键的同时再按下鼠标键，也应当给出详细的报告。
在实际应用中，鼠标右键对程序控制来说是没有用的，因为浏览器已经预先将其设置为与上下文内容相关的帮助键。
10.1.1 在Netscape浏览器中使用鼠标事件
document.onMouseDown=mouseDownHandler;
document.onMouseUp=mouseUpHandler;
一个Netscape浏览器的Event类型的对象传给鼠标事件的处理函数，可以从该对象中获得鼠标的位置信息以及按键信息，鼠标在该页面中的位置信息存放在属性pageY,pageX,中。Event对象的所有属性如下：
type        事件类型
layerX     在事件发生的层中光标的水平位置，以像素为单位
layerY    在事件发生的层中光标的垂直位置，
pageX      光标在页面中的水平位置
pageY      光标在页面中的垂直位置
screenX    光标在屏幕上的水平位置
screenY    光标在屏幕上的垂直位置
which     被按下的鼠标键或键盘按键的ASC码
modifiers   与鼠标和按键组合按键。
data      一个字符串数组，与拖动事件一起使用，包含被拖动对象的URL
10.1.2  在IE中使用鼠标事件
在IE浏览器中处理鼠标事件是完全不同的，为了在文档中捕捉鼠标事件，必须将鼠标事件写入到body标签中。必须通过查看Event对象的来确定鼠标所在的位置，面Event对象是Window对象的一个成员对象，其属性如下：
altKey            alt键按下时为真
shiftKey    Shift键按下时为真
ctrlKey     Ctrl键按下时为真
button     确定是哪个鼠标键被按下
cancelBubble    表明该事件是不是应沿事件层次向上移
clientX     相对用户区域的X坐标
clientY    相对用户区域的Y坐标
keyCode    按键的代码
offsetX    相对容器的坐标X
offsetY     相对容器的坐标Y
returnValue    事件返回值
screenX     相对屏幕的X
screenY    相对屏幕 的Y
fromElement   被移动的元素
sreElement    产生该事件的元素
srcFilter      如果有FilterChange事件发生，则过滤该事件
toElement     正在移动的元素
type      以字符串形式返回事件类型
x      在页面中的X
y    在页面中的Y
reason     数据传输的部署
10.1.5   确定用户使用的是哪一种浏览器
要确定用户使用的是哪一种浏览器，只需检查浏览器的navigator对象即可。该对象有一个名为appName的属性，在IE中的值为Microsoft　Internet　Ｅｘｐｌｏｒｅｒ，而在Netscape中的值为Netscape.
如下为程序的完整代码：
<!--鼠标事件处理-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html>


<head>


<title></title>
<script  type="text/javascript">
document.onMouseDown=mouseDownHandler;
document.onMouseUp=mouseUpHandler;


function mouseDownHandler(e){
if(navigator.appName=="Microsoft Internet Explorer"){
if(window.event.shiftKey&&window.event.ctrlKey){
document.form1.Textbox.value="同时按下Ctrl，Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.shiftKey){
document.from1.Textbox.value="按下Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return ;
}
if(window.event.ctrlKey){
document.form1.Textbox.value="按下Ctrl键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.altKey){
document.form1.Textbox.value="按下Alt键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
document.form1.Textbox.value="单击鼠标左键在"+window.event.x+","+window.event.y;
}
if(navigator.appName=="Netscape"){
switch(e.modifiers){
case 0:document.form1.Textbox.value="单击鼠标左键在"+e.pageX+","+e.pageY;break;
case 2:document.form1.Textbox.value="按下Ctrl键并且单击鼠标左键在"+e.pageX+","+e.pageY;break;
case 4:document.form1.Textbox.value="按下Shift键并且单击鼠左键在"+e.pageX+","+e.pageY;break;
case 6:document.form1.Textbox.value="按下Ctrl和Shift键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
break;
case 1:document.form1.Textbox.value="按下Alt键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
}
}
}
function mouseUpHandler(e){
if(navigator.appName=="Microsoft Internet Explorer"){
if(window.event.shiftKey&&window.event.ctrlKey){
document.form1.Textbox.value="同时按下Ctrl，Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.shiftKey){
document.from1.Textbox.value="按下Shift键并松开鼠标在"+window.event.x+","+window.event.y;
return ;
}
if(window.event.ctrlKey){
document.form1.Textbox.value="按下Ctrl键并松开鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.altKey){
document.form1.Textbox.value="按下Alt键并松开鼠标在"+window.event.x+","+window.event.y;
return;
}
document.form1.Textbox.value="松开鼠标左键在"+window.event.x+","+window.event.y;
}
if(navigator.appName=="Netscape"){
switch(e.modifiers){
case 0:document.form1.Textbox.value="松开鼠标左键在"+e.pageX+","+e.pageY;break;
case 2:document.form1.Textbox.value="按下Ctrl键并且松开鼠标左键在"+e.pageX+","+e.pageY;break;
case 4:document.form1.Textbox.value="按下Shift键并且松开鼠左键在"+e.pageX+","+e.pageY;break;
case 6:document.form1.Textbox.value="按下Ctrl和Shift键的同时松开鼠标左键在"+e.pageX+","+e.pageY;
break;
case 1:document.form1.Textbox.value="按下Alt键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
}
}
}






//-->
</script>
</head>


<body onmousedown="mouseDownHandler();" onmouseup="mouseUpHandler();">
<center>
<form name=form1>
<h1>鼠标事件处理示例</h1><br>
<h2>请按Shift或Ctrl或Alt再单击鼠标左键</h2><br>
<a href="#" onmouseover="mouseDownHandler();"onmouseout="mouseUpHandler();">请将鼠标移到此链接</a>
<br><br>
<input type="text" name="Textbox" size=60>
</form>


</center>






</body>
</html>
10.2  页面预览
在有些网页上会看到这样的效果：当鼠标移至某个超链接时，会在页面的位置显示要链接页面的缩略图，本节就介绍这种效果的实现方法，在页面中显示5个超级链接和一幅图像，如果用户将鼠标移至某个超级链接上时，页面中的图像将用链接页面的缩略图来显示，如果将鼠标移至另一超级链接上时，将显示新的链接页面的缩略图。
代码如下：
<html>


<head>


<title>超级链接页面预览</title>


</head>


<body>
<center>
<form name="form1">
<h1>将光标移至超链接上查看页面预览</h1>
<a href="example1.html" name=link1 onmouseover="link1over()">这是链接一</a><br><br>
<a href="#" name=link2 onmouseover="link2over()">这是链接二</a><br><br>
<a href="#" name=link3 onmouseover="link3over()">这是链接三</a><br><br>
<a href="#" name=link4 onmouseover="link4over()">这是链接四</a><br><br>
<a href="#" name=link5 onmouseover="link5over()">这是链接五</a><br><br>
<img name="img1" src="391.jpg" >
</form>
</center>
<script type="text/javascript">
<!--
function link1over(){
document.form1.img1.src="391.jpg"
}
function link2over(){
document.form1.img1.src="392.jpg"
}
function link3over(){
document.form1.img1.src="398.jpg"
}
function link4over(){
document.form1.img1.src="399.jpg"
}
function link5over(){
document.form1.img1.src="400.jpg"
}
//-->
</script>
</body>


</html>
10.3   图像切换
本节将要展示这样一种效果，页面中显示一幅图像，当鼠标移动到该图像上时，程序将该图像替换为另一幅图像。当鼠标离开时，又恢复为原来的图像。尽管在超级链接上，Netscape Navigator浏览器支持mouseover,mouseout,但是在图像上支持。为此，可以将图像嵌入到一个空链接上。从而让鼠标事件可以被调用 。
<html>


<head>


<title></title>


</head>


<body>
<center>
<form name=form1>
<h1>移动鼠标进行切换</h1>
<a href="" name=link1 onmouseover="imgover()" onmouseout="imgout()">
<img name="img1" src="400.jpg" >
</a>
</form>
</center>
<script language="javascript">
<!--
function imgover(){
document.form1.img1.src="399.jpg";
}
function imgout(){
document.form1.img1.src="400.jpg";
}
//-->
</script>
</body>


</html>
10.4   接受键盘输入
在本节将创建这样一个接受键盘输入的例子，当用户键入文本时，字符将在文本框中显示出来。文本框没有焦点属性，因此文本框并非亲读取按键。一量用户按下按键，程序将直接读取。并将其放入到文本框。
10.4.2  在NetScape中读取按键
对于NetScapt浏览器，使用enent对象的which属性来读取按键的ASC码值。然后要转换该按键的代码，使其可以在文本框中显示，可以使用unescape()方法来实现些功能，该方法的参数是"%"加上按键的十六进制ASC码。且该方法将此字符串转换成一个字符，这样一来。就必须将按键代码表示为字符串格式的十六进制，这里使用Number对象的toString()方法来实现。
10.4.3 在IE浏览器中读取按键
在IE浏览器中，可以通过window.evet对象的keyCode属性来读取按键，通过使用IE浏览器中String类的fromCharCode()方法，可以将按键转换成字符串，并将其值存入inString字符串。然后，再像前面那样，将该字符串在文本框中显示出来。
代码如下：
<html>


<head>


<title></title>


</head>


<body onkeypress="keyPress()">
<center>
<form name=form1>
<h1>接收键盘输入实例</h1>
<h7>请随意在下面的文本框中输入一些字符</h7>
<br><br>
<input name="textbox" bype="text" size=40>
</form>
</center>
<script type="text/javascript">
<!--
document.onKeyPress=keyPress;
var inString=" ";
function keyPress(e){
if(navigator.appName=="NetScape"){
var keyCode=new Number(e.which);
inString+=unescape("%"+keyCode.toString(16));
document.form1.textbox.value=inString;
}
if(navigator.appName=="Microsoft Internet Explorer"){
inString+=String.fromCharCode(window.event.keyCode);
document.form1.textbox.value=inString;
}
}
//-->
</script>
</body>


</html>
10.5   用鼠标点亮文本
在网络中经常会看到，当鼠标移动到某页面上的超级链接时，链接的文字会变大，颜色也随之变化，这种效果在IE中常 见。本节介绍这种效果的实现方法。代码如下：
<html>


<head>


<title></title>


</head>


<body>
<center>
<form name="form1">
<h1>移动鼠标至超级链接以查看效果</h1>
<a href="#" name="link1" onmouseover="link1over()" onmouseout="link1out()">这是链接一</a>
</form>
</center>
<script type="text/javascript">
function link1over(){
link1.style.color="red";
link1.style.fontSize=36;
}
function link1out(){
link1.style.color="black";
link1.style.fontSize=16;
}
</script>
</body>


</html>
10.6   鼠标根随
鼠标跟随产效果也是网页中经常见到的一种效果，实现这种效果的关键是要获取鼠取鼠标的当前位置坐标。并与要跟随的图片，文字所在<div>的坐标关联在一起。这样，当鼠标位置发生变化时，要跟随的位置也发生变化。
10.6.1  图片跟随鼠标
10.7  鼠标感应
弹出警告框
经常可以见到在页面上显示一段文字，当鼠标指向文字时，会弹出一个警告框。实现这种效果的方法非常简单，。
渐显图片
看起来很模糊的图片，鼠标指向该图片后，立刻变清晰。要实现这种效果，需要获取鼠标的。代码如下：
<html>
<head></head>


<body>
<h1>鼠标感应。</h1>
<img src="398.jpg" style="filter:alpha(opacity=20)" onmouseover="makevisible(this,0);" onmouseout="makevisible(this,1)">
<script language="javascript">
function makevisible(cur,which){
if(which==0)
cur.filters.alpha.opacity=100;
else
cur.filters.alpha.opacity=20;
}
</script>
</body>
</html>
10.10禁用鼠标右键菜单
经常可以见到在有的网页上，当单击鼠标右键时，或者没有任何反应，或者弹出一个警告框。代码如下：
<html>
<head></head>
<body onmousedown="click()">
<h1>禁用鼠标右键菜单</h1>
<script language="javascript">
function click(){
if(event.button==2){
alert("你想看什么");
}
}
document.onmousedown=click;
</script>
</body>

</html>

<!--鼠标事件处理-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title></title>
<script  type="text/javascript">
document.onMouseDown=mouseDownHandler;
document.onMouseUp=mouseUpHandler;

function mouseDownHandler(e){
if(navigator.appName=="Microsoft Internet Explorer"){
if(window.event.shiftKey&&window.event.ctrlKey){
document.form1.Textbox.value="同时按下Ctrl，Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.shiftKey){
document.from1.Textbox.value="按下Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return ;
}
if(window.event.ctrlKey){
document.form1.Textbox.value="按下Ctrl键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.altKey){
document.form1.Textbox.value="按下Alt键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
document.form1.Textbox.value="单击鼠标左键在"+window.event.x+","+window.event.y;
}
if(navigator.appName=="Netscape"){
switch(e.modifiers){
case 0:document.form1.Textbox.value="单击鼠标左键在"+e.pageX+","+e.pageY;break;
case 2:document.form1.Textbox.value="按下Ctrl键并且单击鼠标左键在"+e.pageX+","+e.pageY;break;
case 4:document.form1.Textbox.value="按下Shift键并且单击鼠左键在"+e.pageX+","+e.pageY;break;
case 6:document.form1.Textbox.value="按下Ctrl和Shift键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
break;
case 1:document.form1.Textbox.value="按下Alt键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
}
}
}
function mouseUpHandler(e){
if(navigator.appName=="Microsoft Internet Explorer"){
if(window.event.shiftKey&&window.event.ctrlKey){
document.form1.Textbox.value="同时按下Ctrl，Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.shiftKey){
document.from1.Textbox.value="按下Shift键并松开鼠标在"+window.event.x+","+window.event.y;
return ;
}
if(window.event.ctrlKey){
document.form1.Textbox.value="按下Ctrl键并松开鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.altKey){
document.form1.Textbox.value="按下Alt键并松开鼠标在"+window.event.x+","+window.event.y;
return;
}
document.form1.Textbox.value="松开鼠标左键在"+window.event.x+","+window.event.y;
}
if(navigator.appName=="Netscape"){
switch(e.modifiers){
case 0:document.form1.Textbox.value="松开鼠标左键在"+e.pageX+","+e.pageY;break;
case 2:document.form1.Textbox.value="按下Ctrl键并且松开鼠标左键在"+e.pageX+","+e.pageY;break;
case 4:document.form1.Textbox.value="按下Shift键并且松开鼠左键在"+e.pageX+","+e.pageY;break;
case 6:document.form1.Textbox.value="按下Ctrl和Shift键的同时松开鼠标左键在"+e.pageX+","+e.pageY;
break;
case 1:document.form1.Textbox.value="按下Alt键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
}
}
}



//-->
</script>
</head>

<body onmousedown="mouseDownHandler();" onmouseup="mouseUpHandler();">
<center>
<form name=form1>
<h1>鼠标事件处理示例</h1><br>
<h2>请按Shift或Ctrl或Alt再单击鼠标左键</h2><br>
<a href="#" onmouseover="mouseDownHandler();"onmouseout="mouseUpHandler();">请将鼠标移到此链接</a>
<br><br>
<input type="text" name="Textbox" size=60>
</form>

</center>



</body>
</html>

<html>

<head>

<title>超级链接页面预览</title>

</head>

<body>
<center>
<form name="form1">
<h1>将光标移至超链接上查看页面预览</h1>
<a href="example1.html" name=link1 onmouseover="link1over()">这是链接一</a><br><br>
<a href="#" name=link2 onmouseover="link2over()">这是链接二</a><br><br>
<a href="#" name=link3 onmouseover="link3over()">这是链接三</a><br><br>
<a href="#" name=link4 onmouseover="link4over()">这是链接四</a><br><br>
<a href="#" name=link5 onmouseover="link5over()">这是链接五</a><br><br>
<img name="img1" src="391.jpg" >
</form>
</center>
<script type="text/javascript">
<!--
function link1over(){
document.form1.img1.src="391.jpg"
}
function link2over(){
document.form1.img1.src="392.jpg"
}
function link3over(){
document.form1.img1.src="398.jpg"
}
function link4over(){
document.form1.img1.src="399.jpg"
}
function link5over(){
document.form1.img1.src="400.jpg"
}
//-->
</script>
</body>

</html>


<html>

<head>

<title></title>

</head>

<body>
<center>
<form name=form1>
<h1>移动鼠标进行切换</h1>
<a href="" name=link1 onmouseover="imgover()" onmouseout="imgout()">
<img name="img1" src="400.jpg" >
</a>
</form>
</center>
<script language="javascript">
<!--
function imgover(){
document.form1.img1.src="399.jpg";
}
function imgout(){
document.form1.img1.src="400.jpg";
}
//-->
</script>
</body>

</html>



<html>

<head>

<title></title>

</head>

<body onkeypress="keyPress()">
<center>
<form name=form1>
<h1>接收键盘输入实例</h1>
<h7>请随意在下面的文本框中输入一些字符</h7>
<br><br>
<input name="textbox" bype="text" size=40>
</form>
</center>
<script type="text/javascript">
<!--
document.onKeyPress=keyPress;
var inString=" ";
function keyPress(e){
if(navigator.appName=="NetScape"){
var keyCode=new Number(e.which);
inString+=unescape("%"+keyCode.toString(16));
document.form1.textbox.value=inString;
}
if(navigator.appName=="Microsoft Internet Explorer"){
inString+=String.fromCharCode(window.event.keyCode);
document.form1.textbox.value=inString;
}
}
//-->
</script>
</body>

</html>

<html>

<head>

<title></title>

</head>

<body>
<center>
<form name="form1">
<h1>移动鼠标至超级链接以查看效果</h1>
<a href="#" name="link1" onmouseover="link1over()" onmouseout="link1out()">这是链接一</a>
</form>
</center>
<script type="text/javascript">
function link1over(){
link1.style.color="red";
link1.style.fontSize=36;
}
function link1out(){
link1.style.color="black";
link1.style.fontSize=16;
}
</script>
</body>

</html>

<html>

<head>

<title>ͼƬٺ̦˳Ҫ</title>
<script language="javascript">
<!--
if(navigator.appName=="Netscape"){}
else
{
var newtop=0;
var newleft=0;
function doMouseMove(){
var curElement=document.all[iit];
newleft=document.body.clientWidth-curElement.style.pixelWidth;
newtop=document.body.clientHeight-curElement.style.pixelHeight;
height=curElement.style.height;
width=curElement.style.width;
width=parseInt(width);
height=parseInt(height);
if(event.clientX>(document.body.clientWidth-width-5))
newleft=document.body.clientWidth+document.body.scrollLeft-5-width;
else
newleft=document.body.scrollLeft+event.clientX;
curElement.style.pixelLeft=newleft;
if(event.clientY>(document.body.clientHeight-5-height))
newtop=document.body.clientHeight+document.body.scrollTop-5-height;
else
newtop=document.body.scrollTop+event.clientY;
curElement.style.pixelTop=newtop;
}
}
document.onmousemove=doMouseMove;
//-->
</script>
</head>

<body>
<center>
<h1>ͼƬٺ̦˳Ҫʾ}</h1>
<br>
<br>
</center>
<script language="javascript">
if(navigator.appName=="Netscape"){
}
else{
document.write("<div id=OuterDiv>");
document.write("<img id=iit src='400.gif' style='position:absolute;top:5pt;left:5pt;z-index:10;visibility:hidden;'>");
document.write("</div>");
}

</script>
</body>

</html>

<html>
<head></head>

<body>
<h1>鼠标感应。</h1>
<img src="398.jpg" style="filter:alpha(opacity=20)" onmouseover="makevisible(this,0);" onmouseout="makevisible(this,1)">
<script language="javascript">
function makevisible(cur,which){
if(which==0)
cur.filters.alpha.opacity=100;
else
cur.filters.alpha.opacity=20;
}
</script>
</body>
</html>

<html>
	<head></head>
	<body onmousedown="click()">
		<h1>禁用鼠标右键菜单</h1>
<script language="javascript">
	function click(){
		if(event.button==2){
			alert("你想看什么");
		}
		}
		document.onmousedown=click;
	</script>
	</body>
</html>





JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码
06-27
JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例...
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
12-13
在JavaScript中，事件（Events）是用户或浏览器与页面交互时触发的特定动作，比如点击按钮、按下键盘上的键或者移动鼠标。本文将详细介绍如何使用JavaScript处理HTML事件、键盘事件和鼠标事件。 ### HTML事件处理 ...
Js-三大事件（鼠标事件、键盘事件、html事件）
blog_zxb的博客
03-31 697
鼠标事件click：单击dblclick：双击mousedown：鼠标按下mouseup：鼠标抬起mouseover：鼠标悬浮mouseout：鼠标离开mousemove：鼠标移动mouseenter：鼠标进入mouseleave：鼠标离开[html] view plain copy &lt;button onclick="myClick()"&gt;鼠标单击&lt;/button&gt;  &l...
鼠标事件&键盘事件
runHome的博客
03-31 293
import java.awt.*; import java.awt.event.*; class MouseAndKeyEvent  { //定义该图形中所需要的组件的引用 private Frame f; private Button but; private TextField tf; MouseAndKeyEvent() { init(); //一初始化
js鼠标按键事件和键盘按键事件用法实例汇总
weixin_30512089的博客
06-08 74
http://blog.youkuaiyun.com/xiaoya_syt/article/details/69951398 转载于:https://www.cnblogs.com/xiaobai-y/p/6961367.html
js鼠标事件和键盘事件
清风的博客
09-08 1188
事件 1.鼠标事件 //1.鼠标点击左键触发 onclick //2.鼠标经过触发 onmouseover //3.鼠标离开触发 onmouseout //4.获得鼠标焦点触发 onfocus //5.失去鼠标触发 onblur //6.鼠标移动触发 onmousemove //7.鼠标弹起触发 onmouseup //8.鼠标按下触发 onmousedown //9.鼠标经过时触发,但是不会冒泡...
js 监听组合按键
最新发布
qq_38508172的博客
12-29 1498
其中key为你第一次的按键，后面的xxKey是你第二次按下的键名被触发，会在event中出现这个参数并且值为true。方法将一个事件处理函数绑定到。
基于原生JavaScript完成的网页端2048游戏，适配移动端，绑定键盘和鼠标滑动事件.zip
10-23
基于原生JavaScript完成的网页端2048游戏，适配移动端，绑定键盘和鼠标滑动事件 基于原生JavaScript完成的网页端2048游戏，适配移动端，绑定键盘和鼠标滑动事件 基于原生JavaScript完成的网页端2048游戏，适配移动端...
javascript 屏蔽鼠标键盘的几段代码
12-07
上述代码就是一段用于屏蔽特定键盘和鼠标事件的JavaScript实现。以下将详细解释这段代码的工作原理及其涉及的知识点。 1. **事件处理函数**： - `KeyDown` 函数是主要的事件监听器，它处理键盘按键事件。在HTML...
JavaScript实现Shift+鼠标左键多选
狩猪逮兔的专栏
09-08 3907
.aspx代码: ================================================================================ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit
JavaScript的键盘事件（上）
weixin_43228946的博客
08-21 369
键盘事件： onkeydown：按下按键，如果我们一直按着按键，那么就会一直触发事件。 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，浏览器这种设计就是为了防止误操作。 onkeyup：松开按键 我们可以通过事件event，获取keyCode,我们可以借助keyCode获取按键对应的编码。比如26个英文字母对应的编码是65到90，a对应65，b对应66，.....,z对应90。 如果在onkeydown中取消了默认行为，就是return false，则输入的内
Js自定义鼠标左键
qq_45219069的博客
07-03 1019
<style> *{ margin: 0; padding: 0; } ul li{ list-style: none; font-size: 14px; color: #000; padding...
js vscode ctrl+左键 不能跳转@/ 或者../../相对路径
miin_ying的博客
05-17 4900
问题描述 vscode 中运行前端代码，但是不能通过鼠标点击跳转。 解决方法： 1.ctrl+p 输入jsconfig.json 寻找文件。如果没有找到，在根目录下新建 jsconfig.json 2.若已经有文件 将compilerOptions下的paths,新增 若没有文件，填入内容 { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": [ .
js 获取鼠标位置
huolan__34的博客
12-27 2535
在JavaScript中，当事件发生时，获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性，不同浏览器分别在各自事件对象中定义了不同的属性，说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标，但是由于它们参照的坐标系不同，导致精确计算鼠标的位置比较麻烦。 属性及其兼容性 属性 说明 兼容性 clientX 以浏览器窗口左上顶角为原点，定位 x 轴坐标 ...
各种鼠标事件
Little_hope的博客
08-24 463
click 单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件 dblclick 双击鼠标左键时发生，如果右键也按下则不会发生 mousedown 单击任意一个鼠标按钮时发生 mouseout 鼠标指针位于某个元素上且将要移出元素的边界时发生 mouseover 鼠标指针移出某个元素到另一个元素上时发生 mouseup 松开任意一个鼠标按钮时发生 mousemove 鼠标在某个元素上时持续发生 ...
js鼠标右键点击事件
热门推荐
胖胖的博客
10-22 2万+
方法一 首先取消右键的系统默认弹窗 document.oncontextmenu = function(e){ return false //或者 e.preventDefault() } 用onmouseup或者onmousedown代替点击事件 onclick事件无法用e.button判断鼠标左右键。 document.onmouseup = function(e){ if(e.butt...
鼠标左键单击时使用纯js触发右键单击
jojo1001的博客
10-02 1241
鼠标左键单击时使用纯js触发右键单击。
JS键盘键捕捉 ctrlKey和shiftKey
sunshineTing2的博客
03-10 899
【代码】JS键盘键捕捉 ctrlKey和shiftKey。
JavaScript键盘事件与鼠标单击事件详解
本文主要探讨JavaScript中的键盘事件和鼠标单击事件，重点在于理解`onkeypress`, `onkeyup`, 和 `onkeydown` 三种关键的键盘事件，以及它们在用户交互中的作用。 **1. 键盘事件：** - **onkeypress**: 当用户按下并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值