Javascript 在jQuery插件中实现$（this）

我一直在寻找开发一个长点击插件来处理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);

//一些标记
//而且。。。剧本本身
$（“#按钮3”）.longclick（函数（）{
var initial_text=$（“#按钮3”）.val（）；
log（$（this））；
var initial_id=$（this.attr（“id”）；console.log（initial_id）；
var initial_html=$（this.html（）；console.log（initial_html）；
$（“#按钮3”）。替换为（“”）；
}, 1500);

现在，我的插件的问题似乎是它不知道

$（这个）

意味着什么。当I

console.log

the

$（this）

返回窗口本身，而不是我需要的按钮。。。另外，

initial\u id

和

initial\u html

是

未定义的我怎样才能做到这一点？

更新：在我的例子中，
初始html
变量应该是
。
jQuery.html（）
不会像我预期的那样工作，它会说
$（this.html（）
）如何获取元素的HTML？
当您执行
设置超时（处理程序，时间）
时，将从
窗口调用
处理程序
（
此
将与
窗口
相等）

因此，当您初始化插件实例时，您必须将
这个
保存到
$self
中（它是一个jQuery对象）。然后，您必须执行以下操作，而不是
设置超时（处理程序，时间）
：

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"> 

var initial_html=$（this）[0]；
console.log（首字母_html）；//

在
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));

您必须获取事件处理程序正在处理的元素，否则回调将应用于所有元素，请参阅下面的示例，了解如何不工作。
将控制台日志更改为警报。i、 e.警报（初始id）和警报（初始html）这将如何改变任何事情？这将在警报框中显示准确的值。除非我遗漏了什么，否则您的方法有严重问题。如果我在某个按钮上按下鼠标，然后将鼠标从该按钮上移开，然后按下鼠标，该怎么办？如果你知道一个更好的方法，你可以想出一个更好的方法：）它不一样，在对单击的元素的回调中设置
this
，在对整个集合的回调中设置你的
this
，在你更新它之前，你的只是一个代码转储，我在测试中有点慢，以确保这是一个问题，并写了一个正确的答案。@adeneo在
mousedown
的回调中设置
self
的用例是什么？@IonicãBizãu-Uhm，只影响当前元素，而不是所有元素都是我想的用例？