0

我在这里为触摸设备的 JavaScript 点击事件获取了一些代码：GitHub 页面。感谢 Jørn Kinderås提供此代码。

我的问题是，如果我这样做： $('.support input').tap(function () { $(this).click(); });

它不起作用，因为this它指的是DOMWindow（正如我通过执行console.log(this).

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

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);
4

2 回答 2

1

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

在你的情况下，你可以改变这个：

callback(e);

对此：

callback.call(this, e);

或者这个（在你的情况下可能会起作用）：

callback.call(elem, e);

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

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

于 2013-05-01T18:03:34.130 回答
1

你有几个选择：

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

或者

$('.support input').tap(function(o){return function () { o.click(); };}(this));
于 2013-05-01T18:05:33.043 回答