.hover() seems to overwrite .click()

Question

A little background of my problem:

I'm making a board-based game when the user is going to be able to make a path from a square to another one, the thing is that when a square is clicked it should stay highlighted no matter if pointer is over of it and then leaves it. It seems when the square is clicked and then the pointer leaves it the handlerIn of .hover() changes the state of the square's path-type attribute making possible to the square to be unhighlited when the pointer enter and leaves the square.

this is what I've got so far:

$(function() {
 $('td.soccer-field').click(function(){
   if ($('#dice1').text() != '' && $('#dice2').text() != '') {
    if ($("[path-type='begin-path']").length == 0) {
     $(this).attr('path-type','begin-path');
    } else if ($("[path-type='begin-path']").length && $(this).attr('path-type') != 'end-path'){
     $(this).attr('path-type','end-path');
     $('[path-type="selecting-actual-path"]').attr('path-type','actual-path');
    } else if ($(this).attr('path-type') == 'end-path'){
     $(this).attr('path-type','');
    }; 
   }
  });


 $('td.soccer-field').hover(
  function () {
   if ($('#dice1').text() != '' && $('#dice2').text() != '') {
    if ($("[path-type='begin-path']").length == 0) {
     $(this).attr('path-type','select-begin-path');
    } else if ($(this).attr('path-type') == ''){
     var actualCell = $(this).attr('id') + $(this).parent().attr('id');
     var cell, distance,dicesResult =  parseInt($('#dice1').text())+ parseInt($('#dice2').text());
     $("[path-type*='path']").each(function  () {
      cell = $(this).attr('id') + $(this).parent().attr('id');
      distance = new Board().calculateDistanceSquares(actualCell,cell);
      if (distance == 1  && $("[path-type='selecting-actual-path']").length < (dicesResult -2))
      {
        $(this).attr('path-type','selecting-actual-path');
        return false;
      }
     });
    } 
   };
  },function () {
   if ($(this).attr('path-type') == 'selecting-actual-path' || $(this).attr('path-type') == 'select-begin-path') {
     $(this).attr('path-type','');
   }
  });

 $('#diceRoller').click(function() {
  $('#dice1').text(Math.floor(Math.random()*6)+1);
  $('#dice2').text(Math.floor(Math.random()*6)+1);
  $(this).attr('disabled',true);
 });
});

//function Board(playerTurn, piecesPosition, gamePhase, gameBegginingType, container)
function Board(){
 this.buildBoard = function  (container) {
  var board = $('<table></table>').attr('id','board');
  var row, cell,containerHeight,containerWidth;
  for (var i=0; i<10; i++){
   row = $('<tr></tr>').attr('id',i+1);
   for (var j=0; j<20; j++){
    cell = $('<td></td>');
    cell.attr('path-type','');
    if ((j == 0 || j == 19) && (i >= 3) && (i <= 6)) {
     cell.addClass('behind-goal');
    } 
    else if ((j > 0) && (j < 19)){
     cell.attr('id',String.fromCharCode(j+96));
     cell.addClass("soccer-field");
    };
    row.append(cell);
   }
   board.append(row);
  }
  $('#'+container).append(board);
 };

 this.calculateHorizontalDistance = function (sq1,sq2) {
  var column1 = sq1.substring(0,1).charCodeAt(0);
  var column2 = sq2.substring(0,1).charCodeAt(0);
  return ( Math.abs(column1-column2) );
 };

 this.calculateVerticalDistance = function (sq1, sq2) {
  var row1 = parseInt(sq1.substring(1));
  var row2 = parseInt(sq1.substring(1));
  return ( Math.abs(row1-row2) );
 };

 this.calculateDistanceSquares = function(sq1, sq2){
  return(this.calculateVerticalDistance(sq1,sq2)+this.calculateHorizontalDistance(sq1,sq2));
 }
}

var board = new Board();
 board.buildBoard('left');

#left table{
 width: 60em;
 height: 25em;
 border:0.2em solid black;
 border-collapse:collapse;
}

#left table tr{
 height: 2.5em;
 
}

#left table tr td{
 width: 3.33em;
}


td.soccer-field{
 border: 0.1em solid black;
}

td.behind-goal{
 background-color: #F8FAB4;
}

td[path-type*="path"]{
 border: 0.15em solid #F8FAB4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boardContainer">
 <div id="right">
  <p id="dice1"></p><p id="dice2"></p> 
  <button id="diceRoller">Lanzar Dados</button>
 </div>
 
 <div id="left"></div>
</div>

 

A little help will be really appreciate

Answer 1

To prevent that you can add an attribute on the element whenever it is clicked and remove it later on second click. Now in the hover handler check for this attribute on the element, if it is present(or set) then don't do anything just return from the handler.

Something like this

$('td.soccer-field').click(function(){
        $(this).data('clicked', !!$(this).data('clicked'));
        ...
        ...
    });


$('td.soccer-field').hover(
    function () {
      if ($(this).data('clicked')) return;
      ...
      ...
    },
    function () {
      if ($(this).data('clicked')) return;
      ...
      ...
    });