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()orを使用.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 に答える