关于js鼠标按键事件和键盘按键事件的使用方法-js教程-PHP中文网

首页

web前端

js教程

关于js鼠标按键事件和键盘按键事件的使用方法

不言

Jun 30, 2018 am 11:26 AM

js 事件按键键盘鼠标

这篇文章主要介绍了js鼠标按键事件和键盘按键事件用法,结合实例形式总结分析了JavaScript针对鼠标与键盘事件的常用操作技巧,需要的朋友可以参考下

本文实例讲述了js鼠标按键事件和键盘按键事件用法。分享给大家供大家参考，具体如下：

keydown,keyup，keypress：属于你的键盘按键

mousedown,mouseup：属于你的鼠标按键

当按钮被按下时，发生 keydown 事件,

keyup是在用户将按键抬起的时候才会触发的,

完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。

当用户在这个元素上按下鼠标键的时候，发生mousedown

当用户在这个元素上松开鼠标键的时候，发生mouseup

例子

1. 鼠标的哪个按键被点击

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("你点击了鼠标右键!")
}
else
{
alert("你点击了鼠标左键!")
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>请单击你鼠标的左键或右键试试</p>
</body>
</html>

登录后复制

2. 当前鼠标的光标坐标是多少

<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标： " + x + ", Y 坐标： " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>在此文档中按下你鼠标的左键看看！</p>
</body>
</html>

登录后复制

3. 被按下键的unicode码是多少

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p>在此文档中按下你键盘上的某个键看看</p>
</body>
</html>

登录后复制

4. 当前鼠标的光标相对于屏幕的坐标是多少

<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
点击你鼠标的左键
</p>
</body>
</html>

登录后复制

5. 当前鼠标的光标坐标是多少

<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.x
y=event.y
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
点击你鼠标的左键
</p>
</body>
</html>

登录后复制

6. shift键是否按下

<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("shit键按下了!")
}
else
{
alert("shit键没有按下!")
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>按下shit键，点击你鼠标的左键</p>
</body>
</html>

登录后复制

7. 当前被点击的是哪一个元素

<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("你点击了 " + tname + "元素")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>在这里点击看看，这里是p</p>
<h3>或者点击这里也可以呀，这里是h3</h3>
<p>你想点我吗？？</p>
<img border="0" src="../myCode/btn.gif" width="100" height="26" alt="pic">
</body>
</html>

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7473

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

惠普推出 Professor 1 三模轻音鼠标：4000DPI、蓝影 RAW3220，首发价 99 元 Apr 01, 2024 am 09:11 AM

本站3月31日消息，惠普近日在京东上架了一款Professor1三模蓝牙鼠标，可选黑白奶茶色，首发价99元，需要支付10元定金。据介绍，这款鼠标重量106克，采用人体工程学设计，尺寸为127.02x79.59x51.15mm，可选七档4000DPI，搭载蓝影RAW3220传感器，使用650毫安时电池，号称一次充电续航可以使用2个月。本站附鼠标参数信息如下：

雷蛇 | 宝可梦耿鬼款无线鼠标、鼠标垫上架，套装价 1549 元 Jul 19, 2024 am 04:17 AM

本站7月12日消息，雷蛇今日宣布推出雷蛇|宝可梦耿鬼款无线鼠标、鼠标垫。其单品定价分别为1299元和299元，包含两款产品的套装价则为1549元。这并非雷蛇首次推出耿鬼联名的外设产品，2023年雷蛇就推出过耿鬼款的八岐大蛇V2游戏鼠标。此次推出两款新品整体均采用与鬼斯、鬼斯通、耿鬼家族外观类似的深紫色底色，印有这三只宝可梦和精灵球的线条轮廓，中间则为耿鬼这一经典幽灵属性宝可梦的彩色大图。本站发现，雷蛇|宝可梦耿鬼款无线鼠标基于此前发布的毒蝰V3专业版打造。其整体重量为55g，搭载雷蛇第二代FOC

雷蛇鼠标驱动在哪个文件夹 Mar 02, 2024 pm 01:28 PM

很多用户不知道自己雷蛇驱动安装的文件去了哪里，这些驱动文件一般都是安装在了系统盘，也就是电脑的C盘，具体位置在programfiles下的RAZE文件夹。雷蛇鼠标驱动在哪个文件夹答：在系统C盘的programfiles下的RAZE文件夹。一般驱动都会安装在C盘，按照位置去找就可以了。雷蛇鼠标驱动安装方法介绍1、下载好官网的文件以后双击运行自己下载的EXE文件。2、等待软件加载。3、在这里可以选择你要安装的哪个驱动。4、选择好以后点击右下角的“安装”就可以了。

VGN 联名《艾尔登法环》键鼠系列产品上架：菈妮 / 褪色者定制主题，首发 99 元起 Aug 12, 2024 pm 10:45 PM

本站8月12日消息，VGN于8月6日推出了联名《艾尔登法环》键鼠系列产品，包含键盘、鼠标和鼠标垫，采用菈妮/褪色者定制主题设计，目前系列产品已上架京东，售价99元起。本站附联名新品信息如下：VGN丨艾尔登法环S99PRO键盘该键盘采用纯铝合金外壳，辅以五层消音结构，使用GASKET板簧结构，拥有单键开槽PCB、原厂高度PBT材质键帽、铝合金个性化背板；支持三模连接和SMARTSPEEDX低延迟技术；接入VHUB，可一站式管理多款设备，首发549元。VGN丨艾尔登法环F1PROMAX无线鼠标该鼠标

苹果手机键盘怎么设置手写输入法 Mar 08, 2024 pm 02:30 PM

苹果手机键盘用户想要设置手写输入法，但是不知道怎么操作，其实是很简单的，用户可以在手机的键盘设置中直接选择手写输入法输入，如果没有也可以手动添加手写输入法。苹果手机键盘怎么设置手写输入法答：在键盘设置中直接启用手写输入法1、苹果用户在使用输入法的时候，默认是会开启手写输入法的。2、用户只需要在打字的时候直接点击左下角长按选择手写输入法就可以了。3、如果用户的手机里面没有手写输入法也可以进行手动的添加。4、用户进入设置找到通用键盘设置在第一个键盘里面添加手写输入的选项就可以了。5、使用手写输入法可

微信键盘怎么设置皮肤微信键盘皮肤的设置方法 Mar 13, 2024 am 09:04 AM

　　微信键盘怎么设置皮肤？微信键盘是一款非常智能的手机输入法软件，这个软件上面有好多人性化的功能，它可以让用户自己选择输入模式，还可以在这个软件上面以最快的速度找到自己想要的表情然后发出去。这个软件上面还可以让用户自己更换键盘的皮肤，很多用户都还不太清楚要怎么更换皮肤，下面小编整理了皮肤的更换方式供大家参考。微信键盘皮肤的设置方法在手机的微信、短信或其他需要使用键盘的应用中，您可以点击键盘左上角的输入法设置图标，进入设置页面查看各种输入法的功能设置选项。　　2、在输入法的设置页面点击“个性皮肤

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

多彩推出 M900 Pro 无线游戏鼠标：右手人体工学造型，8K Nano 接收器，199 元起 Mar 23, 2024 pm 05:16 PM

本站3月22日消息，Delux多彩推出M900Pro无线游戏鼠标，使用右手人体工学造型，首发预售价199元起。多彩M900Pro使用右手人体工学设计，为中大手用户打造，重63g，并喷有哑光UV涂层。该鼠标使用PAW3395传感器，原配Nano接收器支持8000Hz无线回报率，搭载环诺蓝壳粉点微动并标配RGB充电底座与防滑贴。此外，该鼠标还支持调节LOD、全键自定义、自定义波纹控制与直线修正等功能，配备PTFE脚垫，1.6m伞绳线，并内置接收器收纳仓。本站总结该鼠标具体参数如下：颜色：黑、白、红传

See all articles

关于js鼠标按键事件和键盘按键事件的使用方法

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题