Question

我正在尝试编写一个简单的插件，即enterkeypress，它扩展了按键事件，但只有当按下的键是回车键时才会触发：

(function ($) {
  $.fn.enterkeypress = function (fn) {
    return this.keypress(function(event){
      if(event.which == '13'){
        event.preventDefault();
        fn();
        }
    });
  };
})(jQuery);

测试时，它会正确触发事件，但'this'关键字引用窗口，而不是元素。

$(":text").enterkeypress(function(){console.log(this)});

该代码将在控制台中输出Window ...我宁愿输出输入控件。

我在这里做错了什么？

Answer 1

在回调上使用call or apply来更改此引用：

(function ($) {
  $.fn.enterkeypress = function (fn) {
    return this.keypress(function(event){
      if(event.which == '13'){
        event.preventDefault();
        fn.apply(this);
        }
    });
  };
})(jQuery);

Answer 2

仍然使用全局作用域（即窗口）调用传递的fn回调参数。您应该使用调用或应用来使用jquery对象上下文执行fn。

试试这个：

 (function ($) {
      $.fn.enterkeypress = function (fn) {
        return this.keypress(function(event){
          if(event.which == '13'){
            event.preventDefault();
           //#####NOTICE THE CHANGE HERE###.
            fn.call(this);
            }
        });
      };
    })(jQuery);

我的jquery插件的范围有误

2 个答案: