Проблема с событиями мыши jquery - PullRequest
Новая
       9

Проблема с событиями мыши jquery

1 голос
/ 19 сентября 2019

В настоящее время я работаю над созданием сетки квадратов для карты тайлов.Я настроил его так, что нажатие на плитку меняет ее состояние на неизведанное.Я пытаюсь сделать так, чтобы перетаскивание мышью вниз изменило состояние всех нижележащих плиток, однако я не могу заставить его работать.

Я пытался использовать события mousedown и mouseup для установкипонижающее логическое значение, которое я затем проверяю при наведении мыши.Я попытался сделать это несколькими способами (т.е. закомментированный код).Текущий код будет работать для нажатия, но я действительно хочу иметь возможность перетаскивать, чтобы изменить функцию кратных. 

var tableString;
var width = 35;
var height = 15;
var cells = [];
var localX;
var localY;


function cell(x, y, c) {
  positionX = x;
  positionY = y;
  category = c;
}

function createMap() {
  for (var i = 0; i < height; i++) {
    var row = [];
    for (var j = 0; j < width; j++) {
      let c = new cell();
      c.category = "unexplored";
      c.positionX = j;
      c.positionY = i;
      row.push(c);
    }
    cells.push(row);
  }
}

function drawMap() {
  tableString = "<table draggable='false'>";
  for (var i = 0; i < height; i++) {
    tableString += "<tr draggable='false'>";
    for (var j = 0; j < width; j++) {
      tableString += '<td draggable="false" class="' + cells[i][j].category + '" data-row="' + j + '" data-column="' + i + '"></td>';
    }
    tableString += "</tr>";
  }
  tableString += "</table>";
  $("#mainContainer").html(tableString);
  console.log("drew it");
}

function updateCellCategory(x, y, c) {
  cells[x][y].category = c;
  drawMap();
}


$(document).ready(function() {
  createMap();
  drawMap();


  // var down = false;
  // $(document,"td").mousedown(function () {
  //     down = true;
  // })
  // $(document,"td").mouseup(function () {
  //     down = false;
  // });

  // $(document,"td").on('mouseover','td',function () {
  //     if (down) {
  //         console.log("hovering and holding");
  //         localX = $(this).attr("data-row");
  //         localY = $(this).attr("data-column");
  //         updateCellCategory(localY, localX, "explored");
  //     }

  // });
});


// $(document).on('mousedown',"td, documen",(function () {
//     down = true;
//     console.log(down);
// }));
// $(document).on('mouseup',"*",(function () {
//     down = false;
//     console.log(down);
// }));

// $(document).on('mouseover','td',function () {
//     if (down) {
//         console.log("hovering and holding");
//         localX = $(this).attr("data-row");
//         localY = $(this).attr("data-column");
//         updateCellCategory(localY, localX, "explored");
//     }

// });

$("*").delegate('td', 'click', function() {
  localX = $(this).attr("data-row");
  localY = $(this).attr("data-column");
  updateCellCategory(localY, localX, "explored");
});
html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

#mainContainer {
  max-width: 100%;
  max-height: 90%;
  width: 100%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

td {
  width: 25px;
  height: 25px;
  border: .05px solid black;
}

.explored {
  background-color: lightblue;
}

.unexplored {
  background-color: lightcoral;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
  <div id="mainContainer">

  </div>
</body>

</html>

Основная проблема, с которой я столкнулся при работе над этим, заключается в том, что иногда комментируемый код работает иногда, но второе событие перетаскивания происходит на td.код нарушается, и mouseup не распознается, в результате чего курсор мыши продолжает воздействовать на тайлы, даже если мышь не удерживалась.

Ответы [ 2 ]

1 голос
/ 19 сентября 2019

OK.Использование события click - это не то, что вам нужно, поскольку для этого нужно нажать и , отпустив его.

Вместо этого используйте события mousemove, mousedown и mouseup.,Кроме того, следите за тем, нажата ли мышь или нет с помощью переменной. 

var tableString;
var width = 35;
var height = 15;
var cells = [];
var localX;
var localY;
var mouseDown = false;

function cell(x, y, c) {
  positionX = x;
  positionY = y;
  category = c;
}

function createMap() {
  for (var i = 0; i < height; i++) {
    var row = [];
    for (var j = 0; j < width; j++) {
      let c = new cell();
      c.category = "unexplored";
      c.positionX = j;
      c.positionY = i;
      row.push(c);
    }
    cells.push(row);
  }
}

function drawMap() {
  tableString = "<table draggable='false'>";
  for (var i = 0; i < height; i++) {
    tableString += "<tr draggable='false'>";
    for (var j = 0; j < width; j++) {
      tableString += '<td draggable="false" class="' + cells[i][j].category + '" data-row="' + j + '" data-column="' + i + '"></td>';
    }
    tableString += "</tr>";
  }
  tableString += "</table>";
  $("#mainContainer").html(tableString);
  //console.log("drew it");
}

function updateCellCategory(x, y, c) {
  cells[x][y].category = c;
  drawMap();
}

$(document).ready(function() {
  createMap();
  drawMap();
});

$("*").on("mousedown", 'td',  function() 
{
  mouseDown = true;
});

$(document).on("mouseup", function() 
{
  mouseDown = false;
});

$("*").on("mousemove", 'td',  function() 
{
  if(!mouseDown)
    return;

  localX = $(this).attr("data-row");
  localY = $(this).attr("data-column");
  updateCellCategory(localY, localX, "explored");
});
html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

#mainContainer {
  max-width: 100%;
  max-height: 90%;
  width: 100%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

td {
  width: 25px;
  height: 25px;
  border: .05px solid black;
}

.explored {
  background-color: lightblue;
}

.unexplored {
  background-color: lightcoral;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
  <div id="mainContainer">

  </div>
</body>

</html>
0 голосов
/ 19 сентября 2019

Вы можете проверить, нажата ли мышь, используя параметр события обработчика событий.Посмотрите на последние несколько строк фрагмента. 

var tableString;
var width = 35;
var height = 15;
var cells = [];
var localX;
var localY;


function cell(x, y, c) {
  positionX = x;
  positionY = y;
  category = c;
}

function createMap() {
  for (var i = 0; i < height; i++) {
    var row = [];
    for (var j = 0; j < width; j++) {
      let c = new cell();
      c.category = "unexplored";
      c.positionX = j;
      c.positionY = i;
      row.push(c);
    }
    cells.push(row);
  }
}

function drawMap() {
  tableString = "<table draggable='false'>";
  for (var i = 0; i < height; i++) {
    tableString += "<tr draggable='false'>";
    for (var j = 0; j < width; j++) {
      tableString += '<td draggable="false" class="' + cells[i][j].category + '" data-row="' + j + '" data-column="' + i + '"></td>';
    }
    tableString += "</tr>";
  }
  tableString += "</table>";
  $("#mainContainer").html(tableString);
  console.log("drew it");
}

function updateCellCategory(x, y, c) {
  cells[x][y].category = c;
  drawMap();
}


$(document).ready(function() {
  createMap();
  drawMap();


  // var down = false;
  // $(document,"td").mousedown(function () {
  //     down = true;
  // })
  // $(document,"td").mouseup(function () {
  //     down = false;
  // });

  // $(document,"td").on('mouseover','td',function () {
  //     if (down) {
  //         console.log("hovering and holding");
  //         localX = $(this).attr("data-row");
  //         localY = $(this).attr("data-column");
  //         updateCellCategory(localY, localX, "explored");
  //     }

  // });
});


// $(document).on('mousedown',"td, documen",(function () {
//     down = true;
//     console.log(down);
// }));
// $(document).on('mouseup',"*",(function () {
//     down = false;
//     console.log(down);
// }));

// $(document).on('mouseover','td',function () {
//     if (down) {
//         console.log("hovering and holding");
//         localX = $(this).attr("data-row");
//         localY = $(this).attr("data-column");
//         updateCellCategory(localY, localX, "explored");
//     }

// });

$("*").delegate('td', 'mousedown', function() {
  localX = $(this).attr("data-row");
  localY = $(this).attr("data-column");
  updateCellCategory(localY, localX, "explored");
});

$("*").delegate('td', 'mouseenter', function(event) {
  if (event.buttons) {
    localX = $(this).attr("data-row");
    localY = $(this).attr("data-column");
    updateCellCategory(localY, localX, "explored");
  }
  event.stopPropagation();
});
html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

#mainContainer {
  max-width: 100%;
  max-height: 90%;
  width: 100%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

td {
  width: 25px;
  height: 25px;
  border: .05px solid black;
}

.explored {
  background-color: lightblue;
}

.unexplored {
  background-color: lightcoral;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
  <div id="mainContainer">

  </div>
</body>

</html>
...