JQ有条件处理几个分开事件

Question

是否有一种方法可以通过一个条件处理分离事件，而无需在每个事件处理程序功能中检查它？IE。在下面列出的代码中。还是有一种方法可以更令人信服？有任何想法/建议吗？

var Obj = function(){
  var self = this;
  this.initialized = true;
  $(document).on('click', function(){
    if(self.initialized){
      alert('hax!');
      self.initialized = false;
     }
  })
  $('input').on('mouseenter mouseleave', function(e){
    if(self.initialized){
      $(this).attr('class', e.type == 'mouseenter' ? 'hovered' : '');
    }
  })
  /*$('...').on(...) etc etc*/
}
var obj = new Obj()

.hovered{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='Click me!'/>

Answer 1

我已经玩过一些，也许这是一个适合您的解决方案：

eventHandlerWrapper = function(state, callback) {
        return function(e) { 
        if(state.initialized) {
            return callback.bind(this, e)();
        }
    }
}
var Obj = function() {
  this.initialized = true;
}
var obj = new Obj()
$(document).on('click', eventHandlerWrapper(obj, function(e){
    obj.initialized = false;
}))
$('input').on('mouseenter mouseleave', eventHandlerWrapper(obj, function(e){
  $(e.currentTarget).attr('class', e.type == 'mouseenter' ? 'hovered' : '');
}))

我还创建了一个小提琴：https：//jsfiddle.net/jz17l7h6/

Answer 2

您可以为按钮添加另一个类吗？

var Obj = function(){
    var self = this;
    self.initialized = true;  
    self.dom = $('<input>').attr('type', 'button').val('Click me!')
        .data('obj', this)
        .appendTo($('.container'));
    /*$('...').on(...) etc etc*/
}
$(document)
  .on('click', 'input:not(.uninitialized)', function(){
    alert('hax!');
    $(this).addClass('uninitialized')
      .data('obj').initialized = false;
  })
  .on('mouseenter mouseleave', 'input:not(.uninitialized)', function(e){
    $(this).attr('class', e.type == 'mouseenter' ? 'hovered' : '');
  });
for (var i = 0; i < 5; i++) {
  new Obj();
}

https://jsfiddle.net/chukanov/fzez5th2/3/

如果您不能添加课，可以关闭听众

var Obj = function(){
    var self = this;
    self.initialized = true;    
    self.dom = $('<input>').attr('type', 'button').val('Click me!')
        .appendTo($('.container'));
    var moveHandler = function(e){
        $(this).attr('class', e.type == 'mouseenter' ? 'hovered' : '');
    }; 
    var clickHandler = function(){
        alert('hax!');
        self.initialized = false;
        self.dom
            .off('mouseenter mouseleave', moveHandler)
            .off('click', clickHandler);
    };
    self.dom
        .on('mouseenter mouseleave', moveHandler)
        .on('click', clickHandler);
    /*$('...').on(...) etc etc*/
}
for (var i = 0; i < 5; i++) {
  new Obj();
}

https://jsfiddle.net/chukanov/fzez5th2/4/

，也可以覆盖处理程序

var Obj = function(){
    var self = this;
    self.initialized = true;    
    self.dom = $('<input>').attr('type', 'button').val('Click me!')
        .appendTo($('.container'));
    self.moveHandler = function(e){
        $(this).attr('class', e.type == 'mouseenter' ? 'hovered' : '');
    }; 
    self.clickHandler = function(e){
        alert('hax!');
        self.initialized = false;
        self.clickHandler = function (e) {};
        self.moveHandler = function (e) {};
    };
    self.dom
        .on('mouseenter mouseleave', function (e) { self.moveHandler.apply(this, arguments); })
        .on('click', function (e) { self.clickHandler(e); });
    /*$('...').on(...) etc etc*/
}
for (var i = 0; i < 5; i++) {
  new Obj();
}

https://jsfiddle.net/chukanov/fzez5th2/5/

update

我认为您需要分开鼠标事件处理程序。

var Obj = function(){
    var self = this;
    self.initialized = true;    
    self.dom = $('<input>').attr('type', 'button').val('Click me!')
        .appendTo($('.container'));
    var handlers = {
        mouseenter: function (e) {
            $(this).addClass('hovered');
        },
        mouseleave: function (e) {
            $(this).removeClass('hovered');
        }
    }
    var moveHandler = function(e){
        handlers[e.type].apply(this, arguments);
    }; 
    var clickHandler = function(e){
        alert('hax!');
        self.initialized = false;
        clickHandler = function (e) {};
        moveHandler = function (e) {};
    };
    self.dom
        .on('mouseenter mouseleave', function (e) { 
            moveHandler.apply(this, arguments); 
        })
        .on('click', function (e) { 
            clickHandler(e); 
        });
    /*$('...').on(...) etc etc*/
}
for (var i = 0; i < 5; i++) {
  new Obj();
}

https://jsfiddle.net/chukanov/fzez5th2/7/