Rumah hujung hadapan web tutorial js 关于js鼠标按键事件和键盘按键事件的使用方法

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

Jun 30, 2018 am 11:26 AM
js peristiwa butang papan kekunci tetikus

这篇文章主要介绍了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>
Salin selepas log masuk

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>
Salin selepas log masuk

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

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

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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

相关推荐:

关于JS的函数调用栈stack size的计算方法

JavaScript图片放大技术的实现

Atas ialah kandungan terperinci 关于js鼠标按键事件和键盘按键事件的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

HP melancarkan tetikus lembut tiga mod Profesor 1: 4000DPI, Blue Shadow RAW3220, harga awal 99 yuan HP melancarkan tetikus lembut tiga mod Profesor 1: 4000DPI, Blue Shadow RAW3220, harga awal 99 yuan Apr 01, 2024 am 09:11 AM

Menurut berita dari laman web ini pada 31 Mac, HP baru-baru ini melancarkan tetikus Bluetooth tiga mod Professor1 di JD.com, tersedia dalam warna teh susu hitam dan putih. Harga awal ialah 99 yuan, dan deposit sebanyak 10 yuan diperlukan. Menurut laporan, tetikus ini mempunyai berat 106 gram, menggunakan reka bentuk ergonomik, berukuran 127.02x79.59x51.15mm, mempunyai tujuh tahap 4000DPI pilihan, dilengkapi dengan sensor Blue Shadow RAW3220, dan menggunakan bateri 650 mAh dikatakan boleh digunakan dengan sekali caj 2 bulan. Maklumat parameter tetikus yang dilampirkan pada tapak ini adalah seperti berikut:

Razer |. Tetikus tanpa wayar dan pad tetikus Pokémon Gengar kini tersedia, dengan harga ditetapkan 1,549 yuan Razer |. Tetikus tanpa wayar dan pad tetikus Pokémon Gengar kini tersedia, dengan harga ditetapkan 1,549 yuan Jul 19, 2024 am 04:17 AM

Menurut berita dari laman web ini pada 12 Julai, Razer hari ini mengumumkan pelancaran pad tetikus dan tetikus tanpa wayar Razer|Pokémon Gengar. Harga produk tunggal ialah 1,299 yuan dan 299 yuan, dan harga pakej termasuk kedua-dua produk ialah 1,549 yuan. Ini bukan kali pertama Razer melancarkan produk persisian jenama bersama Gengar pada 2023, Razer melancarkan tetikus permainan Yamata Orochi V2 gaya Gengar. Kedua-dua produk baharu yang dilancarkan kali ini semuanya menggunakan latar belakang ungu gelap yang serupa dengan penampilan keluarga Ghost, Ghost, dan Gengar Mereka dicetak dengan garis besar tiga Pokémon dan Poké Balls ini, dengan watak Gengar di tengah imej besar dan berwarna-warni Pokémon jenis hantu klasik. Laman web ini mendapati bahawa tetikus tanpa wayar Razer|Pokémon Gengar adalah berdasarkan Viper V3 Edisi Profesional yang dikeluarkan sebelum ini. Berat keseluruhannya ialah 55g dan dilengkapi dengan FOC generasi kedua Razer

Produk siri papan kekunci dan tetikus 'Elden's Circle' jenama bersama VGN kini berada di rak: Tema tersuai Lani / Faded One, bermula dari 99 yuan Produk siri papan kekunci dan tetikus 'Elden's Circle' jenama bersama VGN kini berada di rak: Tema tersuai Lani / Faded One, bermula dari 99 yuan Aug 12, 2024 pm 10:45 PM

Menurut berita dari laman web ini pada 12 Ogos, VGN melancarkan siri papan kekunci dan tetikus "Elden Ring" berjenama bersama pada 6 Ogos, termasuk papan kekunci, tetikus dan pad tetikus, yang direka dengan tema tersuai bagi siri Lani/Faded One produk Ia telah diletakkan di JD.com, berharga dari 99 yuan. Maklumat produk baharu jenama bersama yang dilampirkan pada tapak ini adalah seperti berikut: Papan Kekunci VGN丨Elden Law Ring S99PRO Papan kekunci ini menggunakan cangkerang aloi aluminium tulen, ditambah dengan struktur penyenyap lima lapisan, menggunakan struktur spring daun GASKET, mempunyai satu PCB berslot kunci, dan bahan PBT tinggi asal, satah belakang diperibadikan aloi aluminium menyokong sambungan tiga mod dan teknologi kependaman rendah SMARTSPEEDX, ia boleh menguruskan berbilang peranti dalam satu hentian, bermula pada 549 yuan; VGN丨Elden French Ring F1PROMAX tetikus wayarles tetikus

Dalam folder manakah terletaknya pemandu tetikus Razer? Dalam folder manakah terletaknya pemandu tetikus Razer? Mar 02, 2024 pm 01:28 PM

Ramai pengguna tidak tahu ke mana perginya fail yang dipasang oleh pemacu Razer mereka Fail pemacu ini biasanya dipasang pada cakera sistem, iaitu pemacu C komputer Lokasi tertentu berada dalam folder RAZE di bawah fail program. Dalam folder manakah terletaknya pemandu tetikus Razer A: Dalam folder RAZE di bawah fail program pada pemacu sistem C. Secara amnya, pemandu akan dipasang pada pemacu C, cari sahaja mengikut lokasi. Pengenalan kepada kaedah pemasangan pemacu tetikus Razer 1. Selepas memuat turun fail dari tapak web rasmi, klik dua kali untuk menjalankan fail EXE yang dimuat turun. 2. Tunggu sehingga perisian dimuatkan. 3. Di sini anda boleh memilih pemacu yang anda ingin pasang. 4. Selepas memilih, klik "Pasang" di sudut kanan bawah.

Bagaimana untuk menetapkan kaedah input tulisan tangan pada papan kekunci mudah alih Apple Bagaimana untuk menetapkan kaedah input tulisan tangan pada papan kekunci mudah alih Apple Mar 08, 2024 pm 02:30 PM

Pengguna papan kekunci mudah alih Apple ingin menyediakan kaedah input tulisan tangan, tetapi tidak tahu cara melakukannya sebenarnya sangat mudah Pengguna boleh terus memilih kaedah input tulisan tangan dalam tetapan papan kekunci telefon kaedah input tulisan tangan. Cara menetapkan kaedah input tulisan tangan pada papan kekunci telefon mudah alih Apple A: Dayakan kaedah input tulisan tangan terus dalam tetapan papan kekunci 1. Apabila pengguna Apple menggunakan kaedah input, kaedah input tulisan tangan didayakan secara lalai. 2. Pengguna hanya perlu klik dan tahan sudut kiri bawah untuk memilih kaedah input tulisan tangan semasa menaip. 3. Jika pengguna tidak mempunyai kaedah input tulisan tangan dalam telefon bimbitnya, dia juga boleh menambahnya secara manual. 4. Pengguna memasuki tetapan, mencari tetapan papan kekunci universal dan menambah pilihan input tulisan tangan pada papan kekunci pertama. 5. Gunakan kaedah input tulisan tangan untuk

Bagaimana untuk menetapkan kulit untuk papan kekunci WeChat Bagaimana untuk menetapkan kulit untuk papan kekunci WeChat Bagaimana untuk menetapkan kulit untuk papan kekunci WeChat Bagaimana untuk menetapkan kulit untuk papan kekunci WeChat Mar 13, 2024 am 09:04 AM

Bagaimana untuk menetapkan kulit untuk papan kekunci WeChat? Papan Kekunci WeChat ialah perisian kaedah input telefon mudah alih yang sangat pintar Perisian ini mempunyai banyak fungsi mesra pengguna Ia membolehkan pengguna memilih mod input mereka sendiri dan mencari ungkapan yang mereka mahukan secepat mungkin pada perisian ini. Perisian ini juga membolehkan pengguna menukar kulit papan kekunci itu sendiri Ramai pengguna tidak pasti bagaimana untuk menukar kulit Editor di bawah telah menyusun kaedah menukar kulit untuk rujukan anda. Bagaimana untuk menetapkan kulit papan kekunci WeChat Dalam WeChat, SMS atau aplikasi lain yang memerlukan penggunaan papan kekunci pada telefon anda, anda boleh mengklik ikon tetapan kaedah input di penjuru kiri sebelah atas papan kekunci untuk memasuki halaman tetapan untuk melihat pilihan tetapan fungsi untuk pelbagai kaedah input. 2. Klik "Kulit Peribadi" pada halaman tetapan kaedah input.

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Berwarna-warni melancarkan tetikus permainan wayarles M900 Pro: bentuk ergonomik sebelah kanan, penerima Nano 8K, bermula dari 199 yuan Berwarna-warni melancarkan tetikus permainan wayarles M900 Pro: bentuk ergonomik sebelah kanan, penerima Nano 8K, bermula dari 199 yuan Mar 23, 2024 pm 05:16 PM

Menurut berita dari laman web ini pada 22 Mac, Delux telah melancarkan tetikus permainan tanpa wayar M900Pro, yang direka bentuk dengan bentuk ergonomik tangan kanan Harga pra-jualan pertama bermula pada 199 yuan. M900Pro berwarna-warni direka dengan ergonomik tangan kanan dan dibina untuk pengguna dengan tangan sederhana hingga besar Beratnya 63g dan disembur dengan salutan UV matte. Tetikus menggunakan penderia PAW3395, penerima Nano asal menyokong kadar pulangan wayarles 8000Hz, dilengkapi dengan pergerakan mikro titik merah jambu kulit biru Huannuo dan didatangkan secara standard dengan pangkalan pengecasan RGB dan pelekat anti-gelincir. Selain itu, tetikus juga menyokong fungsi seperti pelarasan LOD, penyesuaian kunci penuh, kawalan riak tersuai, dan pembetulan garis lurus Ia dilengkapi dengan pad kaki PTFE, kord paracord 1.6m dan petak storan penerima terbina dalam. Tapak ini meringkaskan parameter khusus tetikus ini seperti berikut: Warna: hitam, putih, merah

See all articles