Question

我希望同时具有onclick和悬停功能，但如果你在某个地方点击过，那么在我点击其他地方之前悬停不应该有效。我已经尝试了很多，但我没有找到任何正常工作的代码。请帮助

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

 };

Answer 1

嗯，我不太确定你需要什么以及为什么需要它。但是，在你编写的那段简短的代码中，我看到了＆＃34; canvas ＆＃34;并思考＆＃34; 哎呀，这可能很有趣！＆＃34;。我之前对canvas元素的经验不多，所以我意识到编写这段代码可能有更好的方法。

但是，我希望我在下面的例子中所写的内容至少接近你所寻找的内容。否则，坚持不懈，改变并适应你喜欢的方式......当你这样做时，试着去学习它。

＆＃13;

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

＆＃13;

canvas {
  border: 1px solid #ccc;
}

＆＃13;

<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>

＆＃13;

jquery中的悬停和onclick功能问题

1 个答案: