悬停和onclick功能问题在jquery

Question

我想同时具有onclick和悬停功能，但如果你点击某处然后悬停不应该工作，直到我点击其他地方。我已经尝试了很多，但我没有找到任何工作代码。请帮助

canvas.addEventListener('mousedown', function(evt) { 
    }, false); 
canvas.onmousemove = function(evt) { 

}; 

Answer 1

那么，我不太清楚你需要什么以及你为什么需要它。但是，在你写的这段简短的代码中，我看到了“canvas”，并且认为“这是什么，那可能很有趣！”。我之前对canvas元素没有太多经验，所以我意识到可能有更好的编写代码的方法。

但是，我希望我在下面的例子中写的东西至少接近你要找的东西。否则，坚决改变和适应你喜欢的方式...当你这样做时，试着去学习一些东西。

var Canvas = function() { 
 
    this.$canvas = $('canvas'); 
 
    this.$currPos = $('#currPos'); 
 
    this.$currClick = $('#currClick'); 
 
    this.$clickInfo = $('#clickInfo'); 
 
    
 
    this.canvsWidth = 150; 
 
    this.cavasHeight = 150; 
 
    this.ctx = ctx = this.$canvas[0].getContext('2d'); 
 
    this.rect = this.$canvas[0].getBoundingClientRect(); 
 
    this.squares = []; 
 
    this.sqm = 50; 
 
    
 
    this.tracker = 0; 
 
    this.latestHover = {}; 
 
    
 
    this._events(); 
 
    this._prepare(); 
 
}; 
 

 
Canvas.prototype._events = function() { 
 
    var self = this; 
 
    
 
    this.$canvas.on('mousemove', function(e) { 
 
    var posX = e.clientX - self.rect.left, 
 
     posY = e.clientY - self.rect.top, 
 
     newX = Math.floor(posX/self.sqm), 
 
     newY = Math.floor(posY/self.sqm); 
 
    
 
    if($.isEmptyObject(self.latestHover) || (self.latestHover.x !== newX || self.latestHover.y !== newY)) { 
 
     self.latestHover.x = newX; 
 
     self.latestHover.y = newY; 
 
     
 
    self.squares.map(function(k, v) { 
 
     let obj = self.squares[v]; 
 
     if(!obj.fixedBackground) obj.reverseBackgroundColor(); 
 
    }); 
 

 
     var square = self.findObject(newX, newY)[0]; 
 
     if(square) { 
 
     square.setBackgroundColor('#ff0000'); 
 
     
 
     self.$currPos.html(newX +'x'+ newY); 
 
     self._redraw(); 
 
     } 
 
     
 
    } 
 
    }); 
 
    
 
    this.$canvas.on('click', function() { 
 
    if(self.tracker === 2) { 
 
     return self._reset(); 
 
    } 
 
    
 
    if(!($.isEmptyObject(self.latestHover))) { 
 
     var x = self.latestHover.x, 
 
      y = self.latestHover.y; 
 
      
 
     var square = self.findObject(x, y)[0]; 
 
      square.setFixedBackground(); 
 
      
 
     self.$currClick.html(x +'x'+ y); 
 
     self.setTracker(); 
 
    } 
 
    }); 
 
    
 
}; 
 

 
Canvas.prototype._prepare = function() { 
 
    for(var row = 0; row < 3; row++) { 
 
    for(var col = 0; col < 3; col++) { 
 
     this.squares.push(new Square(row, col, this.ctx, this.sqm)); 
 
    } 
 
    } 
 
}; 
 

 
Canvas.prototype._redraw = function() { 
 
    var self = this; 
 
    
 
    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); 
 

 
    this.squares.filter(function(k, v) { 
 
    self.squares[v].draw(); 
 
    }); 
 
}; 
 

 
Canvas.prototype.setTracker = function() { 
 
    this.tracker++; 
 
    
 
    if(this.tracker === 2) this.$clickInfo.html('Click one more time to start over'); 
 
}; 
 

 
Canvas.prototype.findObject = function(x, y) { 
 
    var self = this; 
 
    
 
    return square = self.squares.filter(function(k, v) { 
 
     var obj = self.squares[v]; 
 
     if(obj.posX === x && obj.posY === y) return obj; 
 
    }); 
 
}; 
 

 
Canvas.prototype._reset = function() { 
 
    var self = this; 
 
    
 
    this.squares.map(function(k, v) { 
 
    let obj = self.squares[v]; 
 
     obj.reverseBackgroundColor(); 
 
     obj.unsetFixedBackground(); 
 
    }); 
 
    
 
    this.$currClick.html(''); 
 
    this.$clickInfo.html(''); 
 
    this.tracker = 0; 
 
    this._redraw(); 
 
}; 
 

 
var Square = function(x, y, ctx, sqm) { 
 
    this.ctx = ctx; 
 
    this.sqm = sqm; 
 
    this.posX = x; 
 
    this.posY = y; 
 
    this.background = '#fff'; 
 
    this.strokeThickness = 1; 
 
    this.fixedBackground = false; 
 

 
    this.draw(); 
 
}; 
 

 
Square.prototype.setBackgroundColor = function(color) { 
 
    return this.background = color; 
 
}; 
 

 
Square.prototype.reverseBackgroundColor = function() { 
 
    return this.background = '#fff'; 
 
}; 
 

 
Square.prototype.setFixedBackground = function() { 
 
    return this.fixedBackground = true; 
 
}; 
 

 
Square.prototype.unsetFixedBackground = function() { 
 
    return this.fixedBackground = false; 
 
}; 
 

 
Square.prototype.draw = function() { 
 
    this.ctx.fillStyle = this.background; 
 
    this.ctx.fillRect(this.posX * this.sqm, this.posY * this.sqm, this.sqm, this.sqm); 
 
    this.ctx.strokeRect(this.posX * this.sqm, this.posY * this.sqm, this.sqm, this.sqm); 
 
}; 
 

 
window.Canvas = new Canvas();

canvas { 
 
    border: 1px solid #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas width="150" height="150"></canvas> 
 
<div> 
 
    Current position: <span id="currPos"></span> <br/> 
 
    Last click: <span id="currClick"></span> <span id="clickInfo"></span> 
 
</div>