JavaScript event when mouseover AND mousedown - Stack Overflow

admin管理员组

文章数量:1289425

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

I currently have a n x m 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 
  }
}

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

I currently have a n x m 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 
  }
}

• javascript

Share Improve this question Follow asked Feb 3, 2018 at 2:17 Mil3dMil3d 4111 silver badge66 bronze badges 2

• shift + [text selection] – zer00ne Commented Feb 3, 2018 at 3:28
• you should [almost] always use mouseenter instead of mouseover. To know how they differ, consider this: jsfiddle/ZCWvJ/7 – zhirzh Commented Feb 3, 2018 at 3:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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>

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

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

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.

本文标签： JavaScript event when mouseover AND mousedownStack Overflow