Question

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不能指向我想要的？请问怎么解决？

Answer 1

两个地方需要说明

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

2. $.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);
});

Answer 2

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