个人中心
gpt4 book ai didi

javascript - jquery 鼠标事件的问题

转载 作者：行者123 更新时间：2023-11-28 00:32:35 26 4
gpt4 key购买 nike

我目前正在为瓦片 map 制作正方形网格。我已经设置好了，所以点击一个图 block 会将其状态从未探索状态更改为已探索状态。我正在尝试使用它，以便用鼠标向下拖动会更改所有底层图 block 的状态，但我似乎无法让它工作。

我尝试使用 mousedown 和 mouseup 事件来设置一个向下的 bool 值，然后我在鼠标悬停的内部进行检查。我已经尝试通过多种方式解决这个问题(即注释掉的代码)。当前代码适用于单击，但我真的希望能够通过拖动来更改倍数功能。

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 导致鼠标光标继续影响瓷砖甚至尽管没有按住鼠标。

最佳答案

好的。使用 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>

关于javascript - jquery 鼠标事件的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58001317/

26 4 0
文章推荐： javascript - 如何使用 JavaScript 搜索 JSON 树
文章推荐： c++ - 是否必须在同一个文件中声明 C++ 内联函数？
文章推荐： javascript - API Google Maps Javascript 调用上下文菜单内的事件监听器
文章推荐： c++ - reference_wrapper 引用原语
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com