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()说法，{{1}}不会像我期望的那样工作。 如何获取元素的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以获取有关不的工作方式的示例。< / p>

Answer 2

当您执行setTimeout(handler, time)时，handler将从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

在jQuery插件中实现$（this）

2 个答案: