Question

只使用Javascript（没有jQuery等），如果满足这两个条件，有没有办法触发事件？

我目前有一个n x m表，我可以通过点击更改每个条目的颜色。但是，我也希望能够拖动鼠标而不必多次点击。这可能吗？

这就是我所拥有的：

<div id ="startButton">
  <button onclick="startGame()">START</button>
</div>
(...)
var tableEntry = document.getElementsByTagName('td');

(...)
function startGame() {
  for(var i = 0, il=tableEntry.length; i < il; i++) {
    tableEntry[i].onmousedown = toggle; //changes color 
  }
}

Answer 1

由于JS中的事件是短暂的＆＃34;，因此您必须维护一些共享状态变量。

＆＃13;

var table = document.getElementById('game-table');
var tableEntry = table.getElementsByTagName('td');
var isToggling = false;

function enableToggle(e) {
  console.log('enableToggle')
  isToggling = true;

  if (e.target !== table) {
    toggle(e);
  }
}

function disableToggle() {
  console.log('disableToggle')
  isToggling = false;
}

function toggle(e) {
  if (isToggling === false) {
    return;
  }

  console.log('toggle:', e.target);

  e.target.classList.toggle('active');
}

function startGame() {
  table.onmousedown = enableToggle;

  for (var i = 0, il = tableEntry.length; i < il; i++) {
    tableEntry[i].onmouseenter = toggle; //changes color 
  }

  table.onmouseup = disableToggle;
}

startGame();

＆＃13;

table,
td {
  background: rgba(0, 0, 0, 0.4);
  padding: 20px;
  color: white;
  user-select: none;
}

td.active {
  color: red;
}

＆＃13;

<table id="game-table">
  <tr>
    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>
  </tr>

  <tr>
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>

  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>

＆＃13;

Answer 2

最简单的方法是添加两个具有相同功能的事件侦听器

function startGame() {
  for(var i = 0, il=tableEntry.length; i < il; i++) {
    tableEntry[i].addEventListener('mousedown', () => toggle());
    tableEntry[i].addEventListener('mouseenter', () => toggle()); 
  }
}

基本上() => toggle()表示function() { toggle(); }，所以当按下按钮，然后调用toggle时，这是表示函数的好方法，因为toggle可能就像好吧一直是布尔，然后说tableEntry[i].addEventListener('mousedown', toggle);可能会让人感到困惑

Answer 3

在onmousedown中设置一个变量，并在onmouseup中清除它。

然后，在onmousemove中，检查变量。如果它设置了鼠标已关闭，如果没有，它就会启动。

你必须有点创意。你所描述的是一个拖拽事件。要避免默认的拖动行为，您需要回复ondragstart事件，并在致电false后返回event.preventDefault();

Answer 4

不确定我是否正确理解了这个问题，但是当遇到相同问题时，我只是在文档级别添加了一个事件侦听器，该事件侦听器将全局变量设置为true或false。示例：

let tableEntry = document.getElementsByTagName('td');
let squares = Array.from(tableEntry);
let trigger = false;

tableEntry.forEach(function(e){
    e.addEventListener('mouseenter', function(e){
        e.preventDefault();
        if (trigger === true){
            //do something
        };
    });
});

document.addEventListener('mousedown', function(){
    trigger = true;
});

document.addEventListener('mouseup', function(){
    trigger = false;
});

您的里程可能取决于如何为“ tableEntry”选择元素。请记住，某些选择器会返回“活动”节点列表，等等。

尝试使用“ table.children”之类的名称来识别tds是有意义的。可能会更可靠，具体取决于您网站的结构。

还请注意，我必须先转换为数组，才能使用'forEach'函数。

鼠标悬停和mousedown

4 个答案: