0

イベントを取得しようとすると、次のようになります。

Uncaught TypeError：未定義のプロパティ'type'を読み取ることができません

をに渡してoptionsから、にConstructor Itoggle入れよmouseInOutうとしoptionsていItoggle.prototype.mouseInOutます。に引数を渡そうとする前にコードは正常に機能しますmouseInOutが、もう取得できませeventん。私もevent引数として、または任意の引数として渡そうとしても。

エラー：

Uncaught TypeError：未定義のmakeup-itoggle.js：18 Itoggle.mouseInOutmakeup-itoggle.js：18のプロパティ'type'を読み取れません
b.event.special。（無名関数） .handleb.event.dispatch
v.handle

;(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);
4

1 に答える 1

0

関数の代わりに関数の結果を渡します。

// 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ください。

于 2013-03-23T21:27:38.127 に答える