Question

我在这里为触摸设备选择了一些JavaScript点击事件代码：GitHub page。 对此代码感谢Jørn Kinderås。

我的问题是，如果我做这样的事情： $（＆＃39; .support输入＆＃39;）。tap（function（）{ $（本）。点击（）; }）;

它不起作用，因为this指的是DOMWindow（我可以通过console.log(this)看到。

我现在找到的解决方法是在tap事件代码中更改几行。我更改了以下内容：

elem.on('touchend', _bind(function (e) {
    endTime = new Date().getTime();
    if (!didMove && ((endTime - startTime) < tapCancelTime)) {
        callback(e);
    }
}, this));

对此：

elem.on('touchend', _bind(function (e) {
    endTime = new Date().getTime();
    if (!didMove && ((endTime - startTime) < tapCancelTime)) {
        elem.onTap = callback;
        elem.onTap(e);
    }
}, this));

我觉得可能有更好的方法来做到这一点，整个elem.onTap = callback;感觉很脏。

以下是GitHub的源代码：

(function ($) {
    "use strict"
    $.fn.tap = function (callback) {
        var version, didMove, tapCancelTime, startTime, endTime, _bind;
        version = "1.0.1";
        tapCancelTime = 2 * 1000;
        _bind = function (fn, me) { return function () { return fn.apply(me, arguments); }; };

        return this.each(
            function (index, element) {
                var elem = $(element);

                elem.on('click', function (e) {
                    e.preventDefault();
                });

                elem.on('touchstart', _bind(function (e) {
                    didMove = false;
                    startTime = new Date().getTime();
                }, this));
                elem.on('touchmove', _bind(function (e) {
                    didMove = true;
                }, this));
                elem.on('touchend', _bind(function (e) {
                    endTime = new Date().getTime();
                    if (!didMove && ((endTime - startTime) < tapCancelTime)) {
            callback(e);
                    }
                }, this));
                elem.on('touchcancel', _bind(function (e) {
                    callback(e);
                }, this));
            }
        );
    };
})(jQuery);

Answer 1

使用.apply()或.call()将所需的this值传递给任何功能。

在您的情况下，您可以更改此内容：

callback(e);

到此：

callback.call(this, e);

或者这（可能适用于你的情况）：

callback.call(elem, e);

然后回调函数将从您的事件处理程序而不是this获得window的值。仅供参考，当您知道要传递给方法/函数的所有参数时，可以使用.call()。当你有一个类似数组的参数数据结构并且想要传递数组中的所有参数时，可以使用.apply()。

有关.call()和.apply()的更多信息，请参阅MDN以供参考。

Answer 2

您有几个选择：

var $this = this;
$('.support input').tap(function () { $this.click(); });

或

$('.support input').tap(function(o){return function () { o.click(); };}(this));

将“this”传递给自定义Tap事件回调的正确方法

2 个答案: