网页制作前台之Javascript鼠标事件

80酷酷网    80kuku.com

  javascript|鼠标|网页

如果你完全不懂,那么期望1-2周看完一遍拉倒....不用看的太仔细,后面再看到不懂的时候回头去看这些东西好了。

1. 前言和准备工作

这里不会介绍什么软件的用法一类的东西。如果觉得手写代码是在装的人可以出去了,谢谢。

首先你要有台电脑。然后它应该装着windows 和 IE。下面所谈到的代码都仅在IE6.0下调试通过,但是我会尽量用标准的写法。这里先不仔细介绍兼容性问题了,那是另一个教程的事情。我习惯用记事本或者UltraEdit来编辑,实际上任何文本编辑器都可以,只要你喜欢。具体怎么用这些工具就不说了,俺们加快速度。

2. 第一个例子

做什么好呢?俺们从最简单的开始吧....给自己一个作个特效玩玩?...让俺想想....做一个可以扔的方块怎么样?开始做了...

2.1 方块

运行代码框


不要说俺在敷衍啊,万事都有个非常简单的开始,就像俺被俺前mm踹掉一样...
ps: 细心的朋友也许会发现俺的 cursor 用的是 pointer 而不是 hand,这是因为hand 属性不符合标准。虽然俺只为IE写代码,但是保持好的习惯是必要的。以后此类问题一律用 “(兼)”标记。

2.2 可以拖动的方块

2.21 绑定鼠标事件:按下,拖动,释放;获取事件信息:位置,发生的元素

运行代码框


对于菜鸟来说,这段代码其实包含了很多的内容。

2.210 变量的命名
这是个非常重要的东西,我不得不把这段话编号为 2.210 就是为了提醒刚入门的菜鸟 - 用一个自己能明白的名字去命名你的变量。如果你要以此为生,最好也要让你的变量名能被别人看懂。

2.211 绑定事件 - 回字的四种写法
a) 直接在HTML元素标记中写入:
b) 将事件函数的句柄赋值给相应的事件:document.onmousemove=document_event_mousemove; (注意赋值的函数名后面并没有括号)
c) 使用 attachEvent 方法(对于FF类的浏览器来说是 addEventListener)
ps:解除事件的绑定也有相应方式,就不罗嗦了

2.212 不要被那个 I_do_not_care=... 什么的迷惑,那个是三元表达式,如果你有认真学习 JS语法的话。那样写的目的是兼容。

2.213 在函数体的最前面就声明需要用到的变量是个好习惯,它可以避免你犯很多莫名其妙的错误 - 比如递归的死循环之类的。当然,如果你压根不喜欢这个变量(就像俺那个 I_do_not_care 一样),那么就随它去吧。

2.214 e=window.event?window.event:e; 也是为了兼容。其实这句只是获得 event 对象而已。用 e.clientX 而不用 e.x 也是兼容问题。obj.firstChild.nodeValue 而不是 obj.innerText 同理。<div>I am a div.</div>而不是 <div></div>也是同理。 - 兼容真是个tnnd 问题。

2.215 如果你发现自己还是有些糊涂,回去复习 0.1 和 0.2 节中提到的事件部分

2.22 拖动方块

运行代码框


2.221 编程是件脑力活动,呵呵。首先要先琢磨出来,拖动意味着什么。其实拖动就是判断鼠标位置,然后改变你需要拖动的元素的坐标而已。那么分成两步:判断鼠标位置,改变元素的坐标。这个看起来也不难。前一点 2.21 刚讨论过。后一点,如果你对 JS 操作 CSS 有所了解的话也是轻而易举(不明白的回头去看0.3节)。

2.222 现在俺详细描述下这个过程:
a) 鼠标按下时,判断鼠标的位置。将鼠标坐标和元素坐标的差存在元素的 startX 和 startY 两个自定义的属性里。绑定鼠标移动事件。
b) 鼠标移动时,判断鼠标的位置。将鼠标坐标和 startX / startY 的差值作为新的元素坐标。(你问我为啥这样算?帅哥请回去重修高中数学,呵呵)
c) 鼠标按键抬起,清除鼠标移动事件的相应。(不然你放开了鼠标方块还是跟着你跑)

2.223 为啥用 document 的事件绑定而不是把事件绑定在 div上面?问的好(你不会没想到这个问题吧?...)如果你试着将事件绑定在div上,你会发现随着鼠标的快速移动,很容易把div给甩掉(不理解的同学请自己去动动手)。具体的为什么不多说了,点到即止,希望菜鸟多多思考。

2.224 不定义 position="absolute" 的话,left 和 top 是无效的 - 方块不会动的说。

2.3 可以移动的方块

2.31 物理模型和面向对象

运行代码框


2.311
这个模型很简单:
物体的属性:速度(包含 x 分量和 y 分量,这里设置为一个0-5的随机数)
物体的方法:运动
环境属性:运动阻尼 f, 和窗口边缘碰撞弹性系数 k, 重力加速度 g

2.312 注意 obj.move 那个方法(函数)的写法

2.32 让方块动起来

运行代码框


代码开始变难了啊,呵呵。请仔细阅读注释。

2.321 说到底只不过是个物理过程的算法表达而已。其中移动的实现和前面 2.22 节的拖动是类似的。

2.322 注意感觉这里代码中 this 的使用。我在 Obj.move 中使用 this 的时候,this指的就是 Obj

2.323 注意我把 Obj 放在了函数外面。这时候它就是一个全局变量。这是为了后面使用 setInterval 而准备的。很多菜鸟在用定时器的时候常常发现“找不到对象”的错误,请注意一下变量的定义域问题。

2.324 菜鸟注意学习内置对象 Math 的方法

2.33 让方块停下来

运行代码框


在方块上按下鼠标,它会停下来,弹起鼠标,它就继续跑了,呵呵。

2.331 没人注意到 2.211 绑定事件 - 回字的四种写法只举出了三种绑定事件的方法吗?呵呵,这里是第四种:
obj.onmousedown=function(){ this.stop(); }

2.332 我把 setInterval 改成了 setTimeout, 并且将定时器的句柄保存在了 obj 的属性里。这种使用定时器的做法是值得菜鸟借鉴的。

2.4 大结局 - 可以抛出的方块

运行代码框


用鼠标按住方块,然后移动鼠标,同时松开鼠标,看看效果吧,呵呵

这个例子算结束了,哈哈。不作讲解了,各位自己看吧。



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: