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事件相关推荐
- JavaScrpit 犀牛书第七版笔记
JavaScrpit 犀牛书第七版笔记 挖个坑吧,JavaScript 犀牛书英文的第七版(JavaScript: The Definitive Guide, 7th Edition)其实在去年(20 ...
- 只要5分钟用数据可视化带你看遍11月份新闻热点事件
2017年11月份已经离我们而去,在过去的11月份我们也许经历了双十一的剁手,也可能亲眼看见了别人剁手.11月份的北京大兴区发生了"11·18"重大火灾,国内多家幼儿园也多次上了头 ...
- EventBus的粘性事件原理
EventBus也称事件总线,根据发送事件的类型分为普通事件和粘性事件. 粘性事件的用法: 1.订阅的时候加上sticky = true @Subscribe(threadMode = ThreadM ...
- 点击事件如何传递到Activity中
1.首先,当我们触摸屏幕时,通过Android消息机制,从Looper从MessageQueue中取出该事件,发送给WindowInputEventReceiver. 2.WindowInputEve ...
- 介绍一下android的事件分发机制
分发事件是指点击事件: 按下.滑动.抬起.取消(滑动超出控件边界时) 分发事件的组件: 也称为分发事件者,包括Activity.ViewGroup和View 事件分发的入口: Activity.dis ...
- ViewGroup的Touch事件分发(源码分析)
Android中Touch事件的分发又分为View和ViewGroup的事件分发,View的touch事件分发相对比较简单,可参考 View的Touch事件分发(一.初步了解) View的Touch事 ...
- View的Touch事件分发(二.源码分析)
Android中Touch事件的分发又分为View和ViewGroup的事件分发,先来看简单的View的touch事件分发. 主要分析View的dispatchTouchEvent()方法和onTou ...
- View的Touch事件分发(一.初步了解)
Android中Touch事件的分发又分为View和ViewGroup的事件分发,先来看简单的View的touch事件分发. 一次完整的Touch事件序列为: ACTION_DOWN -> AC ...
- 2021年大数据Spark(五十二):Structured Streaming 事件时间窗口分析
目录 事件时间窗口分析 时间概念 event-time 延迟数据处理 延迟数据 Watermarking 水位 官方案例演示 事件 ...
最新文章
- java在jsp中判断td的值是1还是2_Snap7,Eel与S71200简单组态1
- java 构造方法
- 抢购网站服务器时间表,js获取服务器时间,实现抢购倒计时
- c#中WinForm中拖拽窗体实现移动功能(无边框模态窗体)
- python列表生成器语法_python语法_列表生成器_生成器_迭代器_异常捕获
- windows功能_这 12 个好用 Windows 软件,让你也能用上 macOS 的独占功能
- 基于OneAPM的Web系统性能监测
- Android性能优化 笔记
- TMS320C55x汇编语言编程
- C++中带.h与不带.h的头文件
- Win10 设置默认语言
- 使用Linux命令cURL实现文件定时上传到ftp服务器的程序
- 建立一个网站的具体过程
- 卫衣,为青春梦想加油的年代!
- 【读书笔记】《能力陷阱》——改变思想从行动开始
- Xcode遇到couldn’t be opened because you don’t have permission to view it.解决方法
- 微信公众平台开发实例(琴岛学院校园之声) PHP开发 代码挂载SAE平台(五)琴院Siri功能
- 攻击入侵检测NIDS分析
- 浅谈Android开机启动速度优化(含应用程序启动速度优化)
- 5月钓鱼网站简报:共处理钓鱼网站2483个 环比下降