通过自定义方法修正mouseover/mouseout事件

DK 于2010,05,20发表 | 5 评论 »

在Javascript中mouseover/mouseout 事件冒泡停止失效解决办法中我们通过checkHover()方法解决在触发mouseover和mouseout事件的时候无法阻止事件分发的bug。

通过这个方法我们成功的解决了这个问题，但是这个方法是用起来还是比较麻烦。在每次调用相关的方法的时候你都要去检查一下，让我们代码多了很多重复无用的代码。点击查看Demo效果

为了解决这个问题，这里我们做了两个自定义事件：fixover()和fixout()。用这两个事件对mouseover和mouseout事件进行包装。我们的方法使用的时候应该类似如下的形式：

  1. node.fixover(function(){
  2. odo something...
  3. })
  4. node.fixout(function(){
  5. odo something...
  6. })

目标有了，下面我们来实现。

首先这里要构建一个对象，用来获取我们的dom对象，然后在这个基础上对其扩展方法。

  1. var _$ = function(node){
  2. othis.node = dk.$(node);
  3. }
  4. _$.prototype = {
  5. ofixover:function(func){
  6. odo something...
  7. o},
  8. ofixout:function(func){
  9. odo something...
  10. o}
  11. }

基本的框架已经有了，接下来的工作就比较简单了，我们只需要在我们的修正方法内部调用相应的鼠标事件，然后在内部进行checkHover检查，OK就这么简单。
  1. fixover:function(func){
  2. othis.node.onmouseover = function(e){
  3. oe = e || window.event;
  4. oif(dk.checkHover(e,this))
  5. ofunc(e);
  6. o}
  7. }

或者每次触发事件的时候都要新建一个_$()对象是件让人很不爽的事情，所以我们在这里在对我们的对象进行一个简单的封装：
  1. var $$ = function(node){
  2. oreturn new _$(node);
  3. }

现在你可以通过调用直接$$()方法而不必每次都要实例化一个_$对象了。为了让我们的方法更方便易用，我们对fixover和fixout事件进行简单的处理使我们的对象可以支持链式调用：
  1. fixover:function(func){
  2. othis.node.onmouseover = function(e){
  3. oe = e || window.event;
  4. oif(dk.checkHover(e,this))
  5. ofunc(e);
  6. o}
  7. oreturn this;
  8. }

很简单吧，对就是加了一个return this;我们的对象就支持链式调用了。
  1. $$(node).fixover(func1).fixout(fun2);

现在看起来顺眼多了，不是嘛？呵呵，抛砖引玉，你肯定会有更好的想法，不妨一起交流一下。

转载请注明原文出处《通过自定义方法修正mouseover/mouseout事件》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。

标签: , , , | 分类： Javascript, 编程 |

5条回复 发表于 “通过自定义方法修正mouseover/mouseout事件”上

  1. 发表论文 says:
    2010/05/22 at 8:11 am

    支持博主，华丽上场！

    [回复]

  2. 济南网站优化 says:
    2010/05/25 at 6:46 pm

    博主写的不错，学习中！o(∩_∩)o

    [回复]

  3. c7210 says:
    2010/05/27 at 9:05 pm

    来踩一脚；学习了

    [回复]

  4. 中国机械网 says:
    2010/06/19 at 8:32 pm

    写得真不错

    [回复]

  5. dnf之家 says:
    2010/06/20 at 7:36 am

    写得挺好的

    [回复]

我要评论