5

使用 jQuery 1.6 中的事件委托，您可以响应冒泡到共同父级的事件。

一个示例实现是这样的：

(function($){
  $.fn.myeventhandler = function () {

     return this.delegate('a.next, a.prev', 'click customEvent', function (event) {

       var target=$(event.target);
       var bar = null;

       if('click' == event.type) {              /*~[ call this 'a' ]~*/

          // handle the click event
          $('#next-element').animate({width:'200px'},1300,function(){
             bar = 'value1';
             $('#next-element').animate({width:'100px'},1300,function(){
                 bar = 'value2';
                 console.log(bar);
             });
          });

       } else if('customEvent' == event.type) { /*~[ call this 'b' ]~*/

          // handle the customEvent event
          $('#my-element').animate({height:'200px'},1300,function(){
             bar = 'my-event1';
             console.log(bar);
          });

       }

       return false;
     });
  }
})(jQuery);

当您想在页面上绑定许多事件触发器时，这种结构可以很好地工作。但是，我注意到一种奇怪的行为，并想知道是否有人可以在以下范围内启发我：

如果你在'a'之前定义了一个变量' var bar;'并在'a'中使用它并且'a'需要很长时间才能执行，那么如果'click'被第二次触发，'bar'变量是否会被重新分配值还是会创建一个新的？

问题的原因是我有一个“未完成”的动画，其中动画需要 1.3 秒才能完成。如果我触发两个连续的单击事件，则目标和类型设置正确，但第二个动画似乎影响了第一个动画，并且两个范围似乎对彼此可用。

我还没有完成动画，所以我没有一个工作集可以在 jsFiddle 中上线，但是这里有没有我应该研究的范围的经验法则，或者有人可能已经找到了对可用范围的更清晰解释?

编辑： 在上面，我添加了类似于我正在使用的情况。在上面的简化情况下，'bar' 的值在 2 次连续调用中仍然保持预期值，但在更复杂的情况下，我正在处理（仍然），除非我专门将参数传递给回调函数，否则仍然存在允许 2 次连续调用更改参数值的条件，以便回调看到由后续调用创建的值 - 而不是在其自己的触发调用中逻辑设置的值。如果有人可以在简化的示例中复制这种效果，我将不胜感激。我正在缩减我的函数以尝试生成一个复制它的 jsFiddle。

谢谢，AE

4

2 回答 2

1

如果您再次单击它，则会创建一个新的条形变量，两个条形值将彼此独立。为了看到这一点，我创建了一个小提琴。快速单击两次，您会注意到第二个时间柱采用默认值，而不是初始柱变量所具有的值，这是预期的。

于 2011-09-30T14:55:41.263 回答
0

事件对象被传递而不是新创建的各种事件，因此，“a”不会被重新分配，但会受到两个事件操作的影响。

于 2011-09-30T14:50:10.340 回答