Home / Questions / 142186
Accepted
mperez
Asked: 2020-02-29 08:29:37 +0800 CST 2020-02-29 08:29:37 +0800 CST

Change color of HTML elements on mouse hold

  • 772

I am trying to change the color of the elements, changing their class, while the mouse is held down, giving a "paint" effect. Doing it by mouse clicks I have it, here is the code:

$(() => {
    $('table').on("click", "td", (event)=> {
       let selected = $(event.target);
       selected.toggleClass("obstacle");
    });
})
table {
  border-collapse: collapse;
}
td {
  padding: 20px;
  border: 2px solid black;
  cursor: pointer;
}

.obstacle {
  background-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Do you know of a way to change the style by holding down the mouse? Without having to make as many clicks as changes are desired.

I have tried with events like OnMouseDown and such, but I am not able to find the way.

The idea is while the mouse is pressed, do something like this: visual idea

A greeting and thanks in advance

javascript

4 Answers

  1. Best Answer

    I leave you this solution that I made using the mousedown functions that are activated when you click and I use a variable (IsClickDown ) that tells me that it is clicking (it does not release the button) by default it paints the td where you did the event, I also use mouseenter to see the action that the pointer enters the square validating if it is being clicked or not. Lastly, the mouseup function changes the state of IsClickDown and removes the class attribute.that you add to paint the td elements. Additionally add a validation to prevent the td drag function from executing. Remember that the mousedown and mouseup functions will only be performed when done inside the table element.

    $(() => {

    var IsClickDown = false;

    $('table').mousedown(function(event) {
       IsClickDown = true;
       let selected = $(event.target);
       selected.addClass("obstacle");
    });
    $('table').on("dragstart",function(event) {
       event.preventDefault();   
    });
    
    $("td").mouseenter(function(event){
       if(IsClickDown) 
       {
         let selected = $(event.target);
         selected.addClass("obstacle");
       }
    });
    
    $('table').mouseup(function(event) {
       IsClickDown = false;
       $("table td").removeClass("obstacle");
    });
    
    
})
    table {
  border-collapse: collapse;
}
td {
  padding: 20px;
  border: 2px solid black;
  cursor: pointer;
}

.obstacle {
  background-color: red !important;
}

.foo {
  background-color: steelblue;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

    • 10

  2. mousedownYou can use the and methods mousemoveto be able to move through the table cells so you can color them while the mouse is down, and use the event mouseupto declass obstacleall td elements when you release the mouse.

    I use a boolean variable seleccionadowhich will allow me to detect if the mouse is pressed or not. In addition, I also check if the element already has the class so as not to assign it again if the mouse is pressed.

    Your modified example:

    $(() => {
    var seleccionado = false;
    
    $('table').on("mousedown", "td", (event)=> {
       seleccionado = true;
    });
    
    $('table').on("mousemove", "td", (event)=> {
       let selected = $(event.target);
       if(seleccionado == true && !$(event.target).hasClass("obstacle")){
        selected.toggleClass("obstacle");
       }
    });
    
    $(document).on("mouseup", function(){
       seleccionado = false;
       $("td").removeClass("obstacle");
    });
})
    table {
  border-collapse: collapse;
}
td {
  padding: 20px;
  border: 2px solid black;
  cursor: pointer;
}

.obstacle {
  background-color: red !important;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

    • 2

  3. Since you're using jQuery, one solution is to use its event mousedown:

    $("table").mousedown(function(event){
   // Contenido de la función que se ejecuta al gatillar el evento
});

    Below you can see it in action. In addition to the changes to your code, I added a class to your stylesheet that is applied to your elements when that event is fired. 

    $(() => {
    $('table').on("click", "td", (event)=> {
       let selected = $(event.target);
       selected.toggleClass("obstacle");
    });
    
    $("table").mousedown(function(event){
       let selected = $(event.target);
       selected.toggleClass("foo");
    });
})
    table {
  border-collapse: collapse;
}
td {
  padding: 20px;
  border: 2px solid black;
  cursor: pointer;
}

.obstacle {
  background-color: red !important;
}

.foo {
  background-color: steelblue;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

    See also : jQuery mousedown() Method

    • 0

  4. Indeed, you basically have to listen to three events of Mousethe , the first is mousedown() which is fired when the mouse button is pressed, the second is mouseover to listen when the mouse passes over tdits table and the last mouseup when the mouse is released . button of the mouse.

    //Bandera para saber si se mantiene presionado el mouse
var mousePresionado = false;
$("table td").mousedown(function () {
  mousePresionado = true;
  //si se presiona el, añadimos la clase si no la tiene
  $(this).toggleClass("obstacle");
  //evitar que se señale el td y su contenido
  return false;
}) .mouseover(function () {
   //si está presionado
  if (mousePresionado) {
    $(this).toggleClass("obstacle");
  }
})

 //cuando se suelta el botón reiniciamos 
 // y eliminamos la clase
$('table td').mouseup(function () {
    mousePresionado = false;
    $('table td').removeClass('obstacle');
});
    table {
  border-collapse: collapse;
}
td {
  padding: 20px;
  border: 2px solid black;
  cursor: pointer;
}

.obstacle {
  background-color: red !important;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

    • 0