jquery自定义事件 this问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery自定义事件 this问题相关的知识,希望对你有一定的参考价值。

$.fn.longPress = function(fn)
var timeout = undefined;
var $temThis = this;
//var $(this) = this;
for(var i = 0;i<$temThis.length;i++)
$temThis[i].addEventListener('touchstart', function(event)
timeout = setTimeout(fn, 800);
, false);
$temThis[i].addEventListener('touchend', function(event)
clearTimeout(timeout);
, false);

return this;

$('.common-get-input').longPress(function()
$(this).hide();//这里的this不能指向我想要的?请问怎么解决?
console.log('changan');
);
这里的this不能指向我想要的?请问怎么解决?

两个地方需要说明

    $.fn.xxx 中的 this 指向的是 $() 调用时的 jQuery 对象,不用再通过$来封装;

    $.fn.longPress 中,如果要调用参数里的 fn,并且正确传递DOM对象的话,需要写成类似以下这样:

$.fn.longPress = function(fn) 
  ...
  this.each(function() 
    fn.apply(this /*, 其它参数 */ );
  );
;

用 apply 方法来替换回调函数fn中的 this 。


具体来说,在setTimeout的时候,可以类似这么调用:

timeout = setTimeout(function() 
  fn.apply($temThis[i]);
, 800);

这样,在 fn() 中的this就变成当前DOM对象了。

但是,这样写还有一个重要问题,那就是变量 i ,它的值在当前闭包环境中会变成 $temThis.length ,导致代码出错。要正确工作,需要改成这样:

for(var i = 0; i < $temThis.length; i++) 
  (function(target) 
    var timeout;
    target.addEventListener('touchstart', function(event) 
      timeout = setTimeout(function() 
        fn.apply(target);
      , 800);
    , false);
    target.addEventListener('touchend', function(event) 
      clearTimeout(timeout);
    , false);
  )($temThis[i]);

这样创建一个闭包,确保$temThis[i]在每个闭包中都是正确的。另外注意那个timeout,由于对象可能有多个,因此每个对象需要一个单独的 timeout 。


使用 jQuery 的方法会简化一些,含义是一样的,如下:

$temThis.each(function() 
    var timeout, target = this;
    this.addEventListener('touchstart', function(event) 
      timeout = setTimeout(function() 
        fn.apply(target);
      , 800);
    , false);
    this.addEventListener('touchend', function(event) 
      clearTimeout(timeout);
    , false);
);

参考技术A 把this 换成你的 要换的ID 名。
譬如说你之前定义了一个 id="xxx" ,那么这里的this 就用xxx代替。

Summernote jquery 自定义事件回调

【中文标题】Summernote jquery 自定义事件回调【英文标题】:Summernote jquery custom event callback 【发布时间】:2019-11-05 22:08:02 【问题描述】:

我正在尝试让 jquery 自定义事件样式回调与 Summernote 一起使用。此处概述了该过程:@ 987654321@ 但到目前为止我无法让它工作,即控制台没有说@ 987654322@。我遵循了文档,但仍然不明白为什么它不起作用。

<script>
    $(document).ready(function () 
        $('#content').summernote(
            minHeight: 225,
            toolbar: [['style', ['style']], ['font', ['bold', 'italic', 'underline', 'clear']], ['para', ['ul', 'ol', 'paragraph']], ['insert', ['link', 'picture']], ['view', ['fullscreen', 'codeview', 'help']]]
        );
        $('#content').on('summernote.init', function () 
            console.log('test');
        );
    );
</script>

<div class="form-group">
    <label for="content" class="control-label">Content</label>
    <textarea name="content" cols="40" rows="10" id="content" class="form-control automate-wysiwyg" ></textarea>
</div>

【问题讨论】:

【参考方案1】:

您在summernote 启动后监听您的事件监听器,更改顺序并在调用summernote(... 之前注册事件处理程序

【讨论】:

好的,这似乎适用于summernote.init,但不适用于$('#content').on('summernote.image.upload', function (we, files) console.log('test2'); ); @Alex 好吧,这可能是另一个问题,可能是 image.upload 处理程序或图像上传机制本身的特定问题。这似乎是一个不同问题的主题,具有不同的代码 sn-p 思想。如果我的回答解决了您问题中提出的具体问题,我很高兴您能接受。谢谢。

以上是关于jquery自定义事件 this问题的主要内容,如果未能解决你的问题,请参考以下文章

jquery 自定义事件怎样传递 this

JavaScript自定义事件

jQuery 添加自定义事件以及触发自定义事件

如何绑定到jQuery中的所有自定义事件

jQuery事件之自定义事件

在 jQuery 自定义滚动条中使用鼠标滚动事件移动自定义滚动条