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将从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 回答