我在将事件传递给插件中的另一个函数时遇到了一些麻烦

Posted 2023-05-09

【中文标题】我在将事件传递给插件中的另一个函数时遇到了一些麻烦

【英文标题】：I have some trouble pass an event to another function in my plugin

【发布时间】：2013-03-13 13:49:33

【问题描述】：

当我尝试获取事件时，我得到了：

未捕获的类型错误：无法读取未定义的属性“类型”

我正在尝试将Constructor Itoggle 中的options 传递给mouseInOut，然后在Itoggle.prototype.mouseInOut 中获取options。在我尝试将任何参数传递给mouseInOut 之前，代码运行良好，现在我无法再获得event。即使我尝试将event 作为参数或任何参数传递。

错误：

未捕获的类型错误：无法读取未定义的 make-itoggle.js:18 的属性“类型” itoggle.mouseInOut 化妆-itoggle.js:18 b.event.special.(匿名函数).handle b.event.dispatch v.句柄

---

;(function ($) 

  "use strict"; 

  var Itoggle = function (el, options) 
    $(el).on('mouseenter mouseleave', mouseInOut(event, options);
  ;

  Itoggle.prototype.mouseInOut = function (event, options) 
    var $this = $(this)
      , selector = $this.attr('data-target')
      , target = $('#' + selector);

    var opt = $.extend(, $.fn.itoggle.defaults, options);
    console.log(opt.titleActive); // ok

    if (event.type == 'mouseover') //here's come the error. Cannot read property 'type' of undefined
      $this.addClass(opt.elementActive);
      $this.find('.nav-button-title').addClass(opt.titleActive);
      target.show();
     
    else if (event.type == 'mouseout') 
      $this.removeClass(opt.elementActive);
      $this.find('.nav-button-title').removeClass(opt.titleActive);
      target.hide();

      target.mouseenter( function () 
        $this.addClass(opt.elementActive);
        $this.find('.nav-button-title').addClass(opt.titleActive);
        target.show();
      );

      target.mouseleave( function () 
        $this.removeClass(opt.elementActive);
        $this.find('.nav-button-title').removeClass(opt.titleActive);
        target.hide();
      ); 

    
   else  console.log('invalid event'); 



 ;

 /* ITOGGLE PLUGIN DEFINITION
  * ========================= */

  $.fn.itoggle = function () 
    return this.each( function () 
      var $this = $(this)
        , data = $this.data('itoggle')
        , options = typeof option == 'object' && option;
      if (!data)  $this.data('itoggle', (data = new Itoggle(this, options)));
    );
  ;

  $.fn.itoggle.defaults = 
    elementActive: 'nav-outer-button-active',
    titleActive: 'nav-button-title-active'
  ;

  $.fn.itoggle.Constructor = Itoggle;


)(window.jQuery);

【问题讨论】：

event 需要传递到我猜的实际事件处理程序中......

@elclanrs 我认为这也可能是这样，但是当我这样做时，我得到了同样的错误。

【参考方案1】：

你传递的是函数结果而不是函数：

// wrong, function executes immediately,
// event is undefined atm, so it throws an error
$(el).on('mouseenter mouseleave', mouseInOut(event, options));

// correct way?
$(el).on('mouseenter mouseleave', mouseInOut);

虽然我很惊讶这行得通。通常，您必须传递这样的函数：

$(el).on('mouseenter mouseleave', this.mouseInOut);

但显然，如果它按你的方式工作 - 那我就错了。

请记住，执行上下文将是触发事件的 htmlElement，而不是 Itoggle 的实例。

【讨论】：

你@monshq 说的都是对的。我将处理程序的调用方式更改为：$(el).on('mouseenter mouseleave', this.mouseInOut); 并且错误停止了。但我的主要问题是如何将对象 options 传递给 Itoggle.prototype.mouseInOut ??

没有办法这样做afaik。 JQuery 仅接受来自.on() 函数的事件处理程序中的一个参数。如果适合您的情况，您需要修补此 .on() 函数或在原型 Itoggle.prototype.options 中设置选项。