JavaScript中常見的鼠標(biāo)事件及應(yīng)用場(chǎng)景
更新時(shí)間：2025年05月13日 11:31:07 作者：我自縱橫2023
在 JavaScript 中,鼠標(biāo)事件是用戶與網(wǎng)頁進(jìn)行交互的重要方式,通過監(jiān)聽這些事件,開發(fā)者可以實(shí)現(xiàn)各種交互效果,如點(diǎn)擊、懸停、拖動(dòng)等,在 JavaScript 中,鼠標(biāo)事件類型多樣,下面為你詳細(xì)介紹常見的鼠標(biāo)事件類型及應(yīng)用,需要的朋友可以參考下
一. 基礎(chǔ)交互事件
1. click
觸發(fā)時(shí)機(jī)：
當(dāng)用戶在元素上按下并釋放鼠標(biāo)主按鈕（通常是左鍵）時(shí)觸發(fā)。
應(yīng)用場(chǎng)景：
常用于處理按鈕點(diǎn)擊、鏈接跳轉(zhuǎn)、表單提交等操作。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<body>
<button id="myButton">點(diǎn)擊我</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function () {
alert('按鈕被點(diǎn)擊了！');
});
</script>
</body>
</html>
2. dblclick
觸發(fā)時(shí)機(jī)：
當(dāng)用戶在短時(shí)間內(nèi)快速連續(xù)點(diǎn)擊兩次鼠標(biāo)主按鈕時(shí)觸發(fā)。
應(yīng)用場(chǎng)景：
可用于實(shí)現(xiàn)雙擊放大圖片、編輯文本等功能。
示例代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: lightblue; /* 初始背景顏色 */
display: flex; /* 使用flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>雙擊鼠標(biāo)事件，改變顏色</h1>
<div id="myDiv">雙擊我，<br>改變顏色</div>
<script>
const div = document.getElementById('myDiv');
// 顏色數(shù)組
const color = ['lightblue', 'pink', 'lightgreen', 'lightyellow', 'lightgray'];
// 初始化計(jì)數(shù)器為-1，以便第一次雙擊時(shí)顏色數(shù)組從索引0開始變化
let dblcount = -1;
// 添加雙擊事件監(jiān)聽器
div.addEventListener('dblclick', function () {
dblcount++;
// 循環(huán)改變背景顏色
this.style.backgroundColor = color[dblcount % color.length];
});
</script>
</body>
</html>
二、按鈕狀態(tài)事件
3. mousedown
觸發(fā)時(shí)機(jī)：
當(dāng)用戶在元素上按下任意鼠標(biāo)按鈕時(shí)觸發(fā)。
應(yīng)用場(chǎng)景：
常用于實(shí)現(xiàn)拖動(dòng)元素、繪制圖形等操作的起始點(diǎn)。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled-1</title>
</head>
<body>
<h1>鼠標(biāo)事件-按下</h1>
<div id="draggable" style="width:100px;height:100px;background-color:red;">拖動(dòng)我</div>
<script>
const draggable = document.getElementById('draggable');
draggable.addEventListener('mousedown', function () {
console.log('鼠標(biāo)按下');
draggable.style.backgroundColor = 'blue';
});
</script>
</body>
</html>
4. mouseup
觸發(fā)時(shí)機(jī)：
- 當(dāng)用戶在元素上釋放之前按下的鼠標(biāo)按鈕時(shí)觸發(fā)。
應(yīng)用場(chǎng)景：
- 通常與
mousedown事件配合使用，用于完成拖動(dòng)、繪制等操作。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<body>
<div id="drawArea" style="width: 200px; height: 200px; border: 1px solid black;"></div>
<script>
const drawArea = document.getElementById('drawArea');
drawArea.addEventListener('mousedown', function () {
console.log('鼠標(biāo)按下');
drawArea.style.backgroundColor = 'blue';
});
drawArea.addEventListener('mouseup', function () {
console.log('鼠標(biāo)釋放');
drawArea.style.backgroundColor = 'red';
});
</script>
</body>
</html>
此代碼的主要功能是通過監(jiān)聽鼠標(biāo)在指定div上的按下和釋放事件，實(shí)現(xiàn)div背景顏色的變化。具體來說：
- 當(dāng)用戶點(diǎn)擊
div時(shí)，div的背景顏色會(huì)變?yōu)樗{(lán)色，同時(shí)在控制臺(tái)輸出“鼠標(biāo)按下”。 - 當(dāng)用戶松開鼠標(biāo)時(shí)，
div的背景顏色會(huì)變?yōu)榧t色，同時(shí)在控制臺(tái)輸出“鼠標(biāo)釋放”。
這段代碼主要用于演示如何使用JavaScript的事件監(jiān)聽機(jī)制來響應(yīng)用戶的鼠標(biāo)操作，并實(shí)時(shí)更新網(wǎng)頁元素的樣式。
三、鼠標(biāo)移動(dòng)事件
5. mousemove
觸發(fā)時(shí)機(jī)：
- 當(dāng)鼠標(biāo)指針在元素上移動(dòng)時(shí)，會(huì)持續(xù)觸發(fā)該事件。
應(yīng)用場(chǎng)景：
- 常用于實(shí)現(xiàn)鼠標(biāo)跟隨效果、繪制軌跡、實(shí)時(shí)更新鼠標(biāo)位置信息等。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<body>
<div id="moveArea" style="width: 200px; height: 200px; border: 1px solid black;"></div>
<p>請(qǐng)?jiān)诤谏珔^(qū)域內(nèi)移動(dòng)鼠標(biāo)，并查看下面的鼠標(biāo)位置。</p>
<p>鼠標(biāo)位置: (0, 0)</p>
<script>
const moveArea = document.getElementById('moveArea');
moveArea.addEventListener('mousemove', function (event) {
console.log(`鼠標(biāo)位置: (${event.offsetX}, ${event.offsetY})`);
// 使用querySelector選擇頁面中最后一個(gè)<p>標(biāo)簽，并將其文本內(nèi)容更新為當(dāng)前鼠標(biāo)的位置。
document.querySelector('p:last-of-type').textContent = `鼠標(biāo)位置: (${event.offsetX}, ${event.offsetY})`;
});
</script>
</body>
</html>
這段代碼的主要功能是在網(wǎng)頁上創(chuàng)建一個(gè)200x200像素的黑色邊框區(qū)域，并實(shí)時(shí)顯示用戶在這個(gè)區(qū)域內(nèi)的鼠標(biāo)位置。每當(dāng)鼠標(biāo)在該區(qū)域內(nèi)移動(dòng)時(shí)，位置信息會(huì)被更新到頁面上的最后一個(gè)段落標(biāo)簽中，并且在控制臺(tái)中輸出。
6. mouseover、mouseout
觸發(fā)時(shí)機(jī)：
mouseover當(dāng)鼠標(biāo)指針從元素外部移動(dòng)到元素內(nèi)部時(shí)觸發(fā)，并且當(dāng)鼠標(biāo)進(jìn)入該元素的子元素時(shí)也會(huì)觸發(fā)。mouseout當(dāng)鼠標(biāo)指針從元素內(nèi)部移動(dòng)到元素外部時(shí)觸發(fā)，并且當(dāng)鼠標(biāo)離開該元素的子元素時(shí)也會(huì)觸發(fā)。
應(yīng)用場(chǎng)景：
mouseover常用于實(shí)現(xiàn)鼠標(biāo)懸停效果，如顯示下拉菜單、改變?cè)貥邮降取?code>mouseout通常與mouseover事件配合，用于恢復(fù)元素的原始樣式。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠標(biāo)懸停切換類</title>
<style>
/* 設(shè)置div的基本樣式 */
div {
position: relative;
display: inline-block;
place-content: center;
text-align: center;
font-size: 20px;
color: white;
cursor: pointer;
}
/* 定義原始樣式 */
.original {
width: 180px;
height: 180px;
background-color: lightgray;
}
/* 定義懸停時(shí)的樣式 */
.hovered {
width: 180px;
height: 180px;
background-color: pink;
border: 2px solid black;
}
</style>
</head>
<body>
<!-- 創(chuàng)建一個(gè)div元素，初始應(yīng)用original樣式 -->
<div id="element" class="original">懸停切換樣式</div>
<script>
// 獲取id為element的div元素
const element = document.getElementById('element');
// 添加鼠標(biāo)懸停事件監(jiān)聽器，切換到hovered樣式
element.addEventListener('mouseover', function () {
this.classList.remove('original');
this.classList.add('hovered');
});
// 添加鼠標(biāo)移出事件監(jiān)聽器，切換回original樣式
element.addEventListener('mouseout', function () {
this.classList.remove('hovered');
this.classList.add('original');
});
</script>
</body>
</html>
這段代碼的主要功能是在網(wǎng)頁上實(shí)現(xiàn)一個(gè)簡(jiǎn)單的鼠標(biāo)懸停效果。當(dāng)用戶將鼠標(biāo)懸停在特定的div元素上時(shí)，該元素的背景顏色會(huì)從淺灰色變?yōu)榉凵?，并且增加一個(gè)黑色邊框。當(dāng)鼠標(biāo)移開時(shí)，div元素的樣式會(huì)恢復(fù)到原來的淺灰色背景無邊框狀態(tài)。這是一種常見的交互設(shè)計(jì)，用于提高用戶體驗(yàn)，通過視覺反饋來告知用戶他們與頁面元素的交互狀態(tài)。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>懸停下拉菜單示例</title>
<style>
.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-item {
position: relative;
display: inline-block;
}
.menu-item a {
display: block;
padding: 10px;
color: #fff;
background-color: #007BFF;
text-decoration: none;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #007BFF;
list-style-type: none;
margin: 0;
padding: 0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.submenu li {
width: 200px;
}
.submenu li a {
padding: 12px 16px;
text-decoration: none;
display: block;
color: white;
}
.submenu li a:hover {
background-color: #555;
}
</style>
</head>
<body>
<ul class="menu">
<li class="menu-item">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單項(xiàng)1</a>
<ul class="submenu">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >子菜單項(xiàng)1-1</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >子菜單項(xiàng)1-2</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >子菜單項(xiàng)1-3</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單項(xiàng)2</a>
<ul class="submenu">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >子菜單項(xiàng)2-1</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >子菜單項(xiàng)2-2</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >子菜單項(xiàng)2-3</a></li>
</ul>
</li>
</ul>
<script>
document.addEventListener('DOMContentLoaded', function () {
const menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(function (item) {
item.addEventListener('mouseover', function () {
const submenu = this.querySelector('.submenu');
if (submenu) {
submenu.style.display = 'block';
}
});
item.addEventListener('mouseout', function () {
const submenu = this.querySelector('.submenu');
if (submenu) {
submenu.style.display = 'none';
}
});
});
});
</script>
</body>
</html>
下面是對(duì) javascript 代碼的逐步分解：
document.addEventListener('DOMContentLoaded', function () { ... });- 這行代碼的作用是監(jiān)聽整個(gè)文檔是否已經(jīng)完全加載完畢。只有在文檔加載完成后，腳本中的內(nèi)容才會(huì)被執(zhí)行，確保在操作DOM元素時(shí)這些元素已經(jīng)存在。
const menuItems = document.querySelectorAll('.menu-item');- 使用
querySelectorAll方法選擇所有帶有menu-item類名的元素，并將它們存儲(chǔ)在一個(gè)NodeList對(duì)象menuItems中。在這個(gè)例子中，menuItems包含了兩個(gè)菜單項(xiàng)，即“菜單項(xiàng)1”和“菜單項(xiàng)2”。
- 使用
menuItems.forEach(function (item) { ... });- 對(duì)于NodeList中的每一個(gè)元素（即每個(gè)菜單項(xiàng)），執(zhí)行一次回調(diào)函數(shù)。回調(diào)函數(shù)中的參數(shù)
item代表當(dāng)前正在處理的菜單項(xiàng)。
- 對(duì)于NodeList中的每一個(gè)元素（即每個(gè)菜單項(xiàng)），執(zhí)行一次回調(diào)函數(shù)。回調(diào)函數(shù)中的參數(shù)
item.addEventListener('mouseover', function () { ... });- 為每個(gè)菜單項(xiàng)添加一個(gè)
mouseover事件監(jiān)聽器。當(dāng)鼠標(biāo)進(jìn)入菜單項(xiàng)時(shí)，會(huì)觸發(fā)回調(diào)函數(shù)中的代碼。
- 為每個(gè)菜單項(xiàng)添加一個(gè)
const submenu = this.querySelector('.submenu');- 在
mouseover事件的回調(diào)函數(shù)中，this指向觸發(fā)事件的菜單項(xiàng)。通過querySelector方法，我們?cè)谶@個(gè)菜單項(xiàng)內(nèi)部查找第一個(gè)帶有submenu類名的元素，即子菜單。
- 在
if (submenu) { submenu.style.display = 'block'; }- 如果找到了子菜單（即
submenu不為null），則將它的display屬性設(shè)置為’block’，使子菜單顯示出來。
- 如果找到了子菜單（即
item.addEventListener('mouseout', function () { ... });- 為每個(gè)菜單項(xiàng)添加一個(gè)
mouseout事件監(jiān)聽器。當(dāng)鼠標(biāo)離開菜單項(xiàng)時(shí)，會(huì)觸發(fā)回調(diào)函數(shù)中的代碼。
- 為每個(gè)菜單項(xiàng)添加一個(gè)
if (submenu) { submenu.style.display = 'none'; }- 同樣地，在
mouseout事件的回調(diào)函數(shù)中，如果找到了子菜單，則將其display屬性設(shè)置為’none’，使子菜單隱藏起來。
- 同樣地，在
7. mouseenter、mouseleave
觸發(fā)時(shí)機(jī)：
mouseenter當(dāng)鼠標(biāo)指針從元素外部移動(dòng)到元素內(nèi)部時(shí)觸發(fā)，但當(dāng)鼠標(biāo)進(jìn)入該元素的子元素時(shí)不會(huì)再次觸發(fā)。mouseleave當(dāng)鼠標(biāo)指針從元素內(nèi)部移動(dòng)到元素外部時(shí)觸發(fā)，但當(dāng)鼠標(biāo)離開該元素的子元素時(shí)不會(huì)觸發(fā)。
應(yīng)用場(chǎng)景：
mouseenter與mouseover類似，但不會(huì)受子元素影響，適合需要精確控制懸停范圍的場(chǎng)景。mouseleave與mouseout類似，但不會(huì)受子元素影響，常與mouseenter配合使用。
示例代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>mouseenter 事件示例</title>
<style>
.tooltip {
display: none;
position: absolute;
background-color: #007BFF;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
}
.button-container {
position: relative;
display: inline-block;
}
</style>
</head>
<body>
<div class="button-container">
<button id="myButton">懸停我</button>
<div class="tooltip" id="myTooltip">這是一個(gè)提示信息</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const button = document.getElementById('myButton');
const tooltip = document.getElementById('myTooltip');
button.addEventListener('mouseenter', function () {
// 顯示提示框
tooltip.style.display = 'block';
// 獲取按鈕的位置，并設(shè)置提示框的位置
const buttonRect = button.getBoundingClientRect();
tooltip.style.top = `${buttonRect.bottom + window.scrollY}px`;
tooltip.style.left = `${buttonRect.left + window.scrollX}px`;
});
button.addEventListener('mouseleave', function () {
// 隱藏提示框
tooltip.style.display = 'none';
});
});
</script>
</body>
</html>
mouseenter 事件與 mouseover 事件的主要區(qū)別在于，mouseenter 不會(huì)冒泡到其子元素上，而 mouseover 會(huì)。這意味著當(dāng)鼠標(biāo)進(jìn)入一個(gè)元素時(shí)，mouseenter 只會(huì)觸發(fā)一次，而 mouseover 可能在鼠標(biāo)進(jìn)入子元素時(shí)再次觸發(fā)。
mouseenter 事件最適合用于需要精確控制事件只在特定元素上觸發(fā)的場(chǎng)景，而不需要考慮子元素的情況。例如，當(dāng)你想要在鼠標(biāo)進(jìn)入某個(gè)按鈕時(shí)顯示一個(gè)提示，但不希望在子元素上重復(fù)顯示這個(gè)提示時(shí)，可以使用 mouseenter。
在上面的示例中，我們創(chuàng)建了一個(gè)按鈕和一個(gè)提示框。當(dāng)鼠標(biāo)進(jìn)入按鈕區(qū)域時(shí)，使用 mouseenter事件來顯示提示框，并根據(jù)按鈕的位置動(dòng)態(tài)設(shè)置提示框的位置，確保提示框顯示在按鈕下方。當(dāng)鼠標(biāo)離開按鈕區(qū)域時(shí)，使用 mouseleave 事件來隱藏提示框。
這里使用 mouseenter 和 mouseleave 事件而不是 mouseover 和 mouseout 事件，是為了避免當(dāng)鼠標(biāo)移動(dòng)到按鈕的子元素（如果有）時(shí)，提示框被重復(fù)顯示或隱藏。在這個(gè)簡(jiǎn)單的例子中，按鈕沒有子元素，但如果有更復(fù)雜的結(jié)構(gòu)，mouseenter 和 mouseleave 的非冒泡特性會(huì)更顯優(yōu)勢(shì)。
四、鼠標(biāo)滾輪事件
8. wheel
觸發(fā)時(shí)機(jī)：
- 當(dāng)用戶滾動(dòng)鼠標(biāo)滾輪時(shí)觸發(fā)。
應(yīng)用場(chǎng)景：
- 常用于實(shí)現(xiàn)頁面滾動(dòng)、縮放元素、切換幻燈片等功能。
示例代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滾輪事件示例</title>
<style>
body {
height: 2000px; /* 為了能看到滾動(dòng)效果 */
}
</style>
</head>
<body>
<script>
// 獲取body元素
var body = document.body;
// 添加滾輪事件監(jiān)聽器
body.addEventListener('wheel', function(event) {
// 阻止默認(rèn)行為
event.preventDefault();
// 判斷滾輪滾動(dòng)的方向
if (event.deltaY > 0) {
console.log(event.deltaY);
console.log('向下滾動(dòng)');
} else {
console.log('向上滾動(dòng)');
}
});
</script>
</body>
</html>
這段代碼的主要功能是在網(wǎng)頁的<body>元素上添加一個(gè)滾輪事件監(jiān)聽器，用于檢測(cè)用戶鼠標(biāo)滾輪的滾動(dòng)方向，并在控制臺(tái)中輸出滾動(dòng)方向的信息。需要注意的是，這段代碼還阻止了頁面的默認(rèn)滾動(dòng)行為，因此即使用戶嘗試滾動(dòng)鼠標(biāo)滾輪，頁面也不會(huì)發(fā)生自動(dòng)的上下滾動(dòng)。
五、鼠標(biāo)右鍵事件
9. contextmenu
觸發(fā)時(shí)機(jī)：
- 當(dāng)用戶在元素上點(diǎn)擊鼠標(biāo)右鍵時(shí)觸發(fā)。
應(yīng)用場(chǎng)景：
- 可用于自定義上下文菜單，替代瀏覽器默認(rèn)的右鍵菜單。
示例代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>右擊事件示例</title>
<style>
body {
height: 2000px;
/* 為了能看到滾動(dòng)效果 */
position: relative;
}
#customMenu {
display: none;
position: absolute;
background-color: #f9f9f9;
border: 1px solid #d3d3d3;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
padding: 5px 0;
width: 150px;
z-index: 1000;
}
#customMenu div {
padding: 8px 15px;
cursor: pointer;
}
#customMenu div:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="customMenu">
<div onclick="showAlert('選項(xiàng)1')">選項(xiàng)1</div>
<div onclick="showAlert('選項(xiàng)2')">選項(xiàng)2</div>
<div onclick="showAlert('選項(xiàng)3')">選項(xiàng)3</div>
</div>
<script>
// 獲取body元素，以便在頁面上添加事件監(jiān)聽器
var body = document.body;
// 獲取自定義菜單元素，該元素在用戶右擊時(shí)顯示
var customMenu = document.getElementById('customMenu');
// 添加右擊事件監(jiān)聽器
body.addEventListener('contextmenu', function (event) {
// 阻止默認(rèn)行為（顯示瀏覽器的上下文菜單）
event.preventDefault();
// 設(shè)置自定義菜單的位置為鼠標(biāo)點(diǎn)擊的位置
customMenu.style.left = event.pageX + 'px';
customMenu.style.top = event.pageY + 'px';
// 顯示自定義菜單
customMenu.style.display = 'block';
});
// 添加點(diǎn)擊頁面其他地方隱藏菜單的事件監(jiān)聽器
document.addEventListener('click', function (event) {
if (event.target !== customMenu) {
customMenu.style.display = 'none';
}
});
// 顯示彈窗的函數(shù)，用于測(cè)試菜單選項(xiàng)
function showAlert(option) {
alert('你點(diǎn)擊了：' + option);
}
</script>
</body>
</html>
六、事件對(duì)象
在上述示例中，事件處理函數(shù)通常會(huì)接收一個(gè)事件對(duì)象作為參數(shù)（如 event）。通過這個(gè)事件對(duì)象，可以獲取與鼠標(biāo)事件相關(guān)的信息，如鼠標(biāo)的坐標(biāo)、按下的按鈕等。常見的屬性包括：
clientX和clientY：鼠標(biāo)相對(duì)于瀏覽器窗口可視區(qū)域的坐標(biāo)。offsetX和offsetY：鼠標(biāo)相對(duì)于觸發(fā)事件的元素的坐標(biāo)。button：表示按下的鼠標(biāo)按鈕，0 代表左鍵，1 代表中鍵，2 代表右鍵。
這些鼠標(biāo)事件為開發(fā)者提供了豐富的交互手段，可以根據(jù)具體需求靈活運(yùn)用，打造出更加生動(dòng)和交互性強(qiáng)的網(wǎng)頁。
以上就是JavaScript中常見的鼠標(biāo)事件及應(yīng)用場(chǎng)景的詳細(xì)內(nèi)容，更多關(guān)于JavaScript鼠標(biāo)事件及應(yīng)用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框
Toast相信對(duì)于利用微信小程序開發(fā)的朋友們來說都不陌生，有時(shí)候官方的樣式并不能滿足業(yè)務(wù)要求，怎么辦呢，當(dāng)然有解決辦法了。有一個(gè)插件可以直接幫我們完成WeToast，這篇文章主要給大家介紹了微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框的相關(guān)資料，需要的朋友可以參考下。2017-06-06
這篇文章主要是對(duì)javascript中文本框中輸入法切換的問題進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
JavaScript接口的實(shí)現(xiàn)三種方式(推薦)
這篇文章主要介紹了JavaScript接口的實(shí)現(xiàn)三種方式，有注釋法，檢查屬性法和鴨式辨行法，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽的相關(guān)資料，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-05-05
ECMAScript 6即將帶給我們新的數(shù)組操作方法前瞻
這篇文章主要介紹了ECMAScript 6即將帶給我們新的數(shù)組操作方法前瞻,需要的朋友可以參考下2015-01-01
JavaScript操作URL的相關(guān)內(nèi)容集錦
這篇文章主要介紹了JavaScript操作URL的相關(guān)內(nèi)容集錦的相關(guān)資料,需要的朋友可以參考下2015-10-10
Javascript 完美運(yùn)動(dòng)框架(逐行分析代碼，讓你輕松了運(yùn)動(dòng)的原理)
這篇文章主要介紹了Javascript 完美運(yùn)動(dòng)框架,逐行分析代碼，讓你輕松了運(yùn)動(dòng)的原理,需要的朋友可以參考下2015-01-01
JS target與currentTarget區(qū)別說明
target在事件流的目標(biāo)階段；currentTarget在事件流的捕獲，目標(biāo)及冒泡階段。只有當(dāng)事件流處在目標(biāo)階段的時(shí)候，兩個(gè)的指向才是一樣的，而當(dāng)處于捕獲和冒泡階段的時(shí)候，target指向被單擊的對(duì)象而currentTarget指向當(dāng)前事件活動(dòng)的對(duì)象（一般為父級(jí)）。2011-08-08
javascript圓盤抽獎(jiǎng)程序?qū)崿F(xiàn)原理和完整代碼例子
這篇文章主要介紹了javascript圓盤抽獎(jiǎng)程序?qū)崿F(xiàn)原理和完整代碼例子,需要的朋友可以參考下2014-06-06
JavaScript實(shí)現(xiàn)多維數(shù)組的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)多維數(shù)組的方法，有需要的朋友可以參考一下2013-11-11