當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

099_鼠标事件

發布時間：2024/1/8 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 099_鼠标事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. onmouseover事件

1.1. onmouseover當鼠標移入某元素時觸發, 移入和移出其子元素時也會觸發。

1.2. 語法

1.2.1. html中:

1.2.2. JavaScript中:

object.onmouseover=function(){SomeJavaScriptCode};

1.3. onmouseover屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

2. onmouseenter事件

2.1. onmouseenter當鼠標移入某元素時觸發。

2.2. 該事件通常與onmouseleave事件一同使用, 在鼠標指針移出元素上時觸發。

2.3. onmouseenter事件類似于onmouseover事件。唯一的區別是onmouseenter事件不持子元素連帶觸發。

2.4. 語法

2.4.1. html中:

2.4.2. JavaScript中:

object.onmouseenter=function(){myScript};

2.5. onmouseenter屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

3. onmouseout事件

3.1. onmouseout當鼠標移出某元素時觸發, 移入和移出其子元素時也會觸發。

3.2. 語法

3.2.1. html中:

3.2.2. JavaScript中:

object.onmouseout=function(){SomeJavaScriptCode};

3.3. onmouseout屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

4. onmouseleave事件

4.1. onmouseleave當鼠標移出某元素時觸發。

4.2. 該事件通常與onmouseenter事件一起使用, 該事件在鼠標移動到元素上時觸發。

4.3. onmouseleave事件類似于onmouseout事件。唯一的區別是onmouseleave事件不支持子元素連帶觸發。

4.4. 語法

4.4.1. html中:

4.4.2. JavaScript中:

object.onmouseleave=function(){myScript};

4.5. onmouseleave屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

5. onmousemove事件

5.1. onmousemove鼠標在某元素上移動時觸發, 即使在其子元素上也會觸發。

5.2. 語法

5.2.1. html中:

5.2.2. JavaScript中:

object.onmousemove=function(){SomeJavaScriptCode};

5.3. onmousemove屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

6. 例子

6.1.?代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>mouseover、mouseenter、mousemove、mouseout和mouseleave</title><style type="text/css">*{margin: 0;padding: 0;}div {width: 500px;height: 500px;margin: 50px; background: pink;}p {width: 300px;height: 300px;background: red;}</style></head><body><div id="myDiv"><p></p></div><script type="text/javascript">function mymouseover(e){console.log('~~~mymouseover~~~');}function mymouseenter(e){console.log('###mymouseenter###');}function mymousemove(e){console.log('---mymousemove---');}function mymouseout(e){console.log('===mymouseout===');}function mymouseleave(e){console.log('$$$mymouseleave$$$');}var myDiv = document.getElementById('myDiv');myDiv.addEventListener('mouseover', mymouseover);myDiv.addEventListener('mouseenter', mymouseenter);myDiv.addEventListener('mousemove', mymousemove);myDiv.addEventListener('mouseout', mymouseout);myDiv.addEventListener('mouseleave', mymouseleave);</script></body> </html>

6.2. 鼠標從空白處移入大div區域

6.3. 緊接著鼠標從大div區域移入小p區域?

6.4. 緊接著鼠標從小p區域移入大div區域?

6.5. 緊接著鼠標移出大div到空白處?

7. onclick事件

7.1. onclick事件會在元素被點擊時發生。

7.2. 語法

7.2.1. html中:

7.2.2. JavaScript中:

object.onclick=function(){SomeJavaScriptCode};

7.3. onclick屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

8. ondblclick事件

8.1. ondblclick事件會在對象被雙擊時發生。只有鼠標左鍵可以雙擊。

8.2. 語法

8.2.1. html中:

8.2.2. JavaScript中:

object.ondblclick=function(){SomeJavaScriptCode};

8.3. ondblclick屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

9. onmousedown事件

9.1. onmousedown事件會在鼠標按鍵被按下時發生。

9.2. 語法

9.2.1. html中:

9.2.2. JavaScript中:

object.onmousedown=function(){SomeJavaScriptCode};

9.3. onmousedown屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

9.4. 與onmouseup事件相關連得事件發生次序(鼠標左側按鈕):

onmousedown
onmouseup
onclick

9.4. 與onmouseup事件相關連得事件發生次序(鼠標中間按鈕):

onmousedown
onmouseup

9.5. 與onmouseup事件相關連得事件發生次序(鼠標右側按鈕):

onmousedown
onmouseup
oncontextmenu

10. onmouseup事件

10.1. onmouseup事件會在鼠標按鍵被松開時發生。

10.2. 語法

10.2.1. html中:

10.2.2. JavaScript中:

object.onmouseup=function(){SomeJavaScriptCode};

10.3. onmouseup屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

10.4. 與onmouseup事件相關連得事件發生次序(鼠標左側按鈕):

onmousedown
onmouseup
onclick

10.4. 與onmouseup事件相關連得事件發生次序(鼠標中間按鈕):

onmousedown
onmouseup

10.5. 與onmouseup事件相關連得事件發生次序(鼠標右側按鈕):

onmousedown
onmouseup
oncontextmenu

11. oncontextmenu事件

11.1. oncontextmenu事件在元素中用戶右擊鼠標時觸發并打開上下文菜單。

11.2. 語法

11.2.1. html中:

<elementoncontextmenu="SomeJavaScriptCode">

11.2.2. JavaScript中:

object.oncontextmenu=function(){SomeJavaScriptCode};

11.3. oncontextmenu屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

12. 例子

12.1.?代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>click、dblclick、mousedown、mouseup和contextmenu</title><style type="text/css">div {width: 300px;height: 300px;background: pink;}</style></head><body><div id="myDiv"></div><script type="text/javascript">function myclick(e){console.log('~~~myclick~~~');}function mymousedown(e){console.log('###mymousedown###');}function mymouseup(e){console.log('---mymouseup---');}function mycontextmenu(e){console.log('===mycontextmenu===');}function mydblclick(e){console.log('$$$mydblclick$$$');}var myDiv = document.getElementById('myDiv');myDiv.addEventListener('click', myclick);myDiv.addEventListener('mousedown', mymousedown);myDiv.addEventListener('mouseup', mymouseup);myDiv.addEventListener('contextmenu', mycontextmenu);myDiv.addEventListener('dblclick', mydblclick);</script></body> </html>

12.2. 鼠標左鍵

12.3. 鼠標中鍵?

?12.4. 鼠標右鍵

12.5. 鼠標左鍵雙擊?

總結

以上是生活随笔為你收集整理的099_鼠标事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： windows怎样连接到linux桌面,
下一篇： MY-IKuai-2