鼠标悬停和鼠标按下时的JavaScript事件

Question

仅使用Javascript（不使用jQuery等），如果满足这两个条件，是否可以触发事件？

我目前有anxm表，单击一下即可更改每个条目的颜色。 但是，我也希望能够拖动鼠标，而不必多次单击。 这可能吗？

这就是我所拥有的：

<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中的事件是“短暂的”，因此您必须维护一些共享状态变量。

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

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

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

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(); } function() { toggle(); } ，所以当按下按钮时，然后调用toggle ，这是表示函数的好方法，因为toggle可能也可以是布尔值，然后说tableEntry[i].addEventListener('mousedown', toggle); 可能会令人困惑

Answer 3

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

然后，在您的onmousemove ，检查变量。 如果已设置，则鼠标按下，否则，鼠标按下。

您将不得不变得有点创意。 您所描述的是拖动事件。 为了避免默认的拖动行为，您将需要响应ondragstart事件并在调用event.preventDefault();之后返回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”功能。