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

Question

Using only Javascript (no jQuery etc) , is there a way I can trigger an event if those two conditions are met?

I currently have anxm table and I can change the color of each entry with a click. However, I also want to be able to drag the mouse around instead of having to click many times. Is this possible?

This is what I have:

<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

Since events in JS are "short-lived", you'd have to maintain some shared state variable.

 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

The easiest thing to do is to add two event listeners which both have the same functionality

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

Basically () => toggle() means function() { toggle(); } function() { toggle(); } , so when the button is pressed, then call toggle , this is a good way to represent a function, because toggle could just as well have been a boolean, then saying tableEntry[i].addEventListener('mousedown', toggle); could have been confusing

Answer 3

Set a variable in your onmousedown , and clear it in your onmouseup .

Then, in your onmousemove , check the variable. If it's set the mouse is down, if not it's up.

You will have to get a bit creative. What you are describing is a drag event. To avoid the default drag behaviour you will need to respond to the ondragstart event and return false after calling event.preventDefault();

Answer 4

Not sure if I understood the question correctly, but when I ran into the same issue, I simply added an eventlistener on document level, which set a global variable to true or false. Example:

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

Your mileage may very in terms of how you select your elements for 'tableEntry'. Remember that some selectors return 'live' nodelists, etc.

It might make sense trying to identify the tds by using something like "table.children". Could be more reliable, depending on how your site is structured.

Also note that I have to convert to an array first, in order to make use of the 'forEach' function.