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

编程问答

010_Raphael事件

發布時間：2025/5/22 编程问答 31 豆豆

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

1. 單擊事件

1.1. click()方法是用來為Raphael元素綁定單擊事件的方法。語法如下:

rect.click(function(e){ });

2. 雙擊事件

2.1. dblclick()方法是用來為Raphael元素綁定雙擊事件的方法。語法如下:

rect.dblclick(function(e){ });

3. 鼠標鍵按下

3.1. mousedown()方法為Raphael元素綁定鼠標鍵按下的動作, 任何鼠標鍵按下都是觸發事件。語法如下:

rect.mousedown(function(e){ });

4. 鼠標鍵抬起

4.1. mouseup()方法與上面mousedown()相反, 觸發條件為鼠標按下的鍵被釋放(抬起)。語法如下:

rect.mouseup(function(e){ });

5. 鼠標進入

5.1. mousemove()方法為鼠標進入一個Raphael元素時觸發。語法如下:

rect.mousemove(function(e){ });

6. 鼠標移出

6.1. mouseout()方法為鼠標移出一個Raphael元素時觸發。語法如下:

rect.mouseout(function(e){ });

7. 鼠標移過

7.1. mousemove()方法為鼠標在一個Raphael元素上面移過時觸發。語法如下:

rect.mousemove(function(e){ });

8. 例子

8.1. 代碼

<!DOCTYPE html> <html><head><title>Raphael事件</title><script type="text/javascript" src="raphael.js"></script><style type="text/css">#sample-1, #sample-2, #sample-3, #sample-4, #sample-5, #sample-6, #sample-7 {width: 600px;border: 1px solid #aaa;}</style></head><body><h1>單擊事件</h1><div id="sample-1"></div><script type="text/javascript">var paper1 = Raphael("sample-1", 600, 100);var rect1 = paper1.rect(20, 20, 60, 40).attr({"fill": "green"});rect1.click(function(e){ alert("發生單擊事件");});</script><h1>雙擊事件</h1><div id="sample-2"></div><script type="text/javascript">var paper2 = Raphael("sample-2", 600, 100);var rect2 = paper2.rect(20, 20, 60, 40).attr({"fill": "green"});rect2.dblclick(function(e){ alert("發生雙擊事件");});</script><h1>鼠標鍵按下</h1><div id="sample-3"></div><script type="text/javascript">var paper3 = Raphael("sample-3", 600, 100);var rect3 = paper3.rect(20, 20, 60, 40).attr({"fill": "green"});rect3.mousedown(function(e){ alert("鼠標鍵按下");});</script><h1>鼠標鍵抬起</h1><div id="sample-4"></div><script type="text/javascript">var paper4 = Raphael("sample-4", 600, 100);var rect4 = paper4.rect(20, 20, 60, 40).attr({"fill": "green"});rect4.mouseup(function(e){ alert("鼠標鍵抬起");});</script><h1>鼠標進入</h1><div id="sample-5"></div><script type="text/javascript">var paper5 = Raphael("sample-5", 600, 100);var rect5 = paper5.rect(20, 20, 60, 40).attr({"fill": "green"});rect5.mouseover(function(e){ alert("鼠標進入");});</script><h1>鼠標移出</h1><div id="sample-6"></div><script type="text/javascript">var paper6 = Raphael("sample-6", 600, 100);var rect6 = paper6.rect(20, 20, 60, 40).attr({"fill": "green"});rect6.mouseout(function(e){ alert("鼠標移出");});</script><h1>鼠標移過</h1><div id="sample-7"></div><script type="text/javascript">var paper7 = Raphael("sample-7", 600, 100);var rect7 = paper7.rect(20, 20, 60, 40).attr({"fill": "green"});rect7.mousemove(function(e){ if(this.text != undefined) this.text.remove();this.text = paper7.text(100, 20, e.clientX + "," + e.clientY).attr({'font-size': 11, 'fill': 'red', 'text-anchor': 'start' });});</script></body> </html>

8.2. 效果圖

總結

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

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