2

jQuery でこのようなイベントを処理するロングクリック プラグインの開発を探していましたが、多くの調査の結果、最良の方法を見つけました。以下のプラグインを作成しました。大きなファイルではありませんが、必要なものをカバーしています。その分問題点はありますが…

$(function($) {
  var holdTimer;
  $.fn.longclick = function( handler, time ) {
    if(time == undefined) time = 500;
    return this.mouseup(function(){
      clearTimeout(holdTimer);
    }).mousedown(function(){
      holdTimer = window.setTimeout(handler, time);
    });
  };
  $.fn.longclick.defaultTime = 500;
}(jQuery));

以下に、それをテストするページがあります。

// some markup
<input type="button" name="button3" id="button3" value="1500ms">

// and... the script itself

$("#button3").longclick( function() {
  var initial_text = $("#button3").val();
  console.log( $(this) );
  var initial_id = $(this).attr("id"); console.log( initial_id);
  var initial_html = $(this).html(); console.log(initial_html);
  $("#button3").replaceWith('<input type="textbox" id="" value=' + initial_text + '>');
}, 1500);

さて、私のプラグインの問題は、それが何を意味するのかわからないこと$(this)です。必要なボタンではなく、ウィンドウ自体を返すconsole.logと...また、. どうすればこれを行うことができますか?$(this)initial_idinitial_htmlundefined

更新:私のinitial_html場合、変数は<input type="button" name="button3" id="button3" value="1500ms">. とjQuery.html()言って思うように動かない$(this).html()。要素の HTML を取得するにはどうすればよいですか?

4

2 に答える 2

2

setTimeoutの値の中にthisは常にウィンドウがあり、setTimeout 関数のスコープからコールバックを呼び出しています。

$(function ($) {
    var holdTimer;
    $.fn.longclick = function (handler, time) {
        return this.on({
            mouseup : function () {
                clearTimeout(holdTimer);
            },
            mousedown : function () { 
                var self  = this;
                holdTimer = window.setTimeout(function() {
                    handler.call(self);
                }, time || $.fn.longclick.defaultTime);
            }
        });
    };
    $.fn.longclick.defaultTime = 500;
}(jQuery));

イベントハンドラーが動作している要素を取得する必要があります。そうしないと、コールバックがすべての要素に適用されます。これが機能しない例については、このFIDDLEを参照してください。

于 2014-05-28T06:44:16.957 に答える
1

を実行setTimeout(handler, time)するhandlerと、 from が呼び出されますwindow(thisは と等しくなりますwindow)。

そのため、プラグイン インスタンスを初期化するときはthis、$self(jQuery オブジェクトです) に保存する必要があります。次に、代わりに次のsetTimeout(handler, time)ことを行う必要があります。

holdTimer = window.setTimeout(function () {
    handler.call($self);
}, time);

編集したプラグインは次のとおりです。

$(function($) {
  var holdTimer;
  $.fn.longclick = function( handler, time ) {
    var $self = this;
    if(time == undefined) time = 500;
    return this.mouseup(function(){
      clearTimeout(holdTimer);
    }).mousedown(function(){
        holdTimer = window.setTimeout(function () {
            handler.call($self);
        }, time);
    });
  };
  $.fn.longclick.defaultTime = 500;
}(jQuery));

古い要素の HTML についてはjQuery.html()、内側の HTML を取ります。が必要ですouterHTML。したがって、次のようになります$(this)[0].outerHTML。

var initial_html = $(this)[0].outerHTML;
console.log(initial_html); // <input type="button" name="button3" id="button3" value="1500ms">

JSFIDDLE

于 2014-05-28T06:41:58.427 に答える