javascript - 在 jQuery 插件中实现 $(this)

Question

我一直在寻找开发一个长按插件来处理 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_id和 initial_html是 undefined 。 我怎样才能完成这项工作？

更新:initial_html在我的例子中，变量应该是 <input type="button" name="button3" id="button3" value="1500ms"> . jQuery.html()不会像我预期的那样工作 $(this).html() . 如何获取元素的 HTML？

Answer 1

在 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有关如何不工作的示例。