Question

继我之前提出的问题之后，我决定编写一系列模仿移动事件的jQuery插件（tap，taphold等）。

我有这个概念，但是在执行处理函数时遇到了问题。以下是我定义插件方法的方法：

(function($) {
    var touch_capable = isTouchCapable();

    var settings = {
        swipe_h_threshold : 30,
        swipe_v_threshold : 50,
        taphold_threshold : 750,
        startevent        : (touch_capable) ? 'touchstart' : 'mousedown',
        endevent          : (touch_capable) ? 'touchend'   : 'mouseup'
    };

    // tap Event:
    $.fn.tap = function(handler) {
        return this.each(function() {

            var $this = $(this);
            var started = false;            

            $this.bind(settings.startevent, function() {
                started = true;
            });

            $this.bind(settings.endevent, function() {              
                if(started)
                {
                    handler();
                }
            });
        });
    };
}) (jQuery);

然后我可以使用$('#a_div').tap();绑定这些'事件'。我遇到的问题是这个问题：

如果我将函数传递给处理元素的tap()方法，则会出错。例如：

$('#my_div').tap(function() { alert($(this).get()) });

实际上是提醒[object DOMWindow]。有人能指出我正确执行处理函数的方向吗？它可能以某种方式与事件传播有关吗？

Answer 1

您可以使用Function.prototype.call和Function.prototype.apply方法设置函数的执行上下文;

$this.bind(settings.endevent, function() {              
    if(started)
    {
        handler.call(this);
    }
});

这允许您将接口bind提供给提供的处理程序;

$this.bind(settings.endevent, function() {              
    if(started)
    {
        handler.apply(this, arguments);
    }
});

现在处理程序将接收事件对象作为它的第一个参数，this将设置事件触发的元素。

jQuery事件插件问题

1 个答案: