一个函数多个元素

Question

目前我正在画在画布上的元素：

var head = new Kinetic.Ellipse({ 
    x: stage.width()/2, 
    y: 100, 
    radius: { 
      x: 50, 
      y: 60 
     }, 
    fill: '#DDDDDD', 
    stroke: 'black', 
    strokeWidth: 2 
    }); 

    var neck = new Kinetic.RegularPolygon({ 
    x: stage.width()/2, 
    y: 180, 
    sides: 4, 
    radius: 70, 
    fill: '#DDDDDD', 
    stroke: 'black', 
    strokeWidth: 2 
    }); 

layer.add(neck); 
layer.add(head); 

，并点击或触摸时改变这些元素的颜色，但我会在屏幕上的元素很多，不想相同数量的功能来改变每一个。

有没有办法让我们说下面两个是一个功能，但影响上述两个。

head.on('touchstart, mousedown', function() { 
    var current = this.getFill(); 
    var fill = ""; 
    switch (current) { 
     case "#DDDDDD": 
     fill = "#FFC926"; 
     break; 
     case "#FFC926": 
     fill = "#FF0000"; 
     break; 
     case "#FF0000": 
     fill = "#000000"; 
     break; 
     default: 
     fill= "#DDDDDD"; 
    } 
    this.setFill(fill); 
    layer.draw(); 
    }); 

    neck.on('touchstart, mousedown', function() { 
    var current = this.getFill(); 
    var fill = ""; 
    switch (current) { 
     case "#DDDDDD": 
     fill = "#FFC926"; 
     break; 
     case "#FFC926": 
     fill = "#FF0000"; 
     break; 
     case "#FF0000": 
     fill = "#000000"; 
     break; 
     default: 
     fill= "#DDDDDD"; 
    } 
    this.setFill(fill); 
    layer.draw(); 
    }); 

Answer 1

您可以提取一个共同的功能，并使用它像波纹管

var evaentListener = function(obj) { 
    return function() { 
     var current = obj.getFill(); 
     var fill = ""; 
     switch (current) { 
      case "#DDDDDD": 
      fill = "#FFC926"; 
      break; 
      case "#FFC926": 
      fill = "#FF0000"; 
      break; 
      case "#FF0000": 
      fill = "#000000"; 
      break; 
      default: 
      fill= "#DDDDDD"; 
     } 
     obj.setFill(fill); 
     layer.draw(); 
    } 
} 

head.on('touchstart, mousedown',evaentListener(this)); 

neck.on('touchstart, mousedown',evaentListener(this));