jQ有條件處理幾個分離的事件

Question

有沒有辦法處理一個條件的分離事件，而不在每個事件處理函數中檢查它？即在下面列出的代碼中。或者也許有辦法做到這一點更方便？任何想法/建議？

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; 
    this.initialized = true; 
    $(document).on('click mouseenter mouseleave ', function(e){ 
    if (e.type === 'click'){ 
     alert('click triggered'); 
    } 
    else if (e.type === 'mouseenter' || e.type === 'mouseleave') { 
      alert('mouseenter triggered'); 
    } 

}); 

var obj = new Obj(); 

Answer 3

你可以爲你的按鈕添加另一個類嗎？

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/

更新

我認爲你需要單獨的鼠標事件處理程序。

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/