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对象的话,需要写成类似以下这样:
...
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问题的主要内容,如果未能解决你的问题,请参考以下文章