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

在鼠标按住时更改 HTML 元素的颜色

  • 772

我正在尝试更改元素的颜色，更改它们的类，同时按住鼠标，给出“绘画”效果。通过鼠标点击我有它，这里是代码：

$(() => {
    $('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>

你知道通过按住鼠标改变样式的方法吗？无需根据需要进行尽可能多的点击。

我已经尝试过 OnMouseDown 等事件，但我无法找到方法。

这个想法是在按下鼠标时，执行以下操作： 视觉理念

提前致以问候和感谢

javascript

4 Answers

  1. Best Answer

    我留给你这个解决方案，我使用当你点击时激活的mousedown函数，我使用一个变量（IsClickDown）告诉我它正在点击（它不会释放按钮）默认情况下它会在你做的地方绘制td该事件，我还使用mouseenter 来查看指针进入正方形的动作，以验证它是否被单击。最后，mouseup函数 改变IsClickDown的状态并移除类属性。您添加以绘制 td 元素。另外添加一个验证以防止执行 td 拖动功能。请记住，mousedown 和 mouseup 函数只有在表格元素内完成时才会执行。

    $(() => {

    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. mousedown您可以使用and方法mousemove在表格单元格中移动，以便在鼠标按下时为它们着色，并在释放鼠标时使用该事件mouseup对obstacle所有 td 元素进行解密。

    我使用一个布尔变量seleccionado，它可以让我检测鼠标是否被按下。此外，我还检查元素是否已经具有类，以便在按下鼠标时不会再次分配它。

    您修改后的示例：

    $(() => {
    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. 由于您使用的是 jQuery，因此一种解决方案是使用它的事件mousedown：

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

    您可以在下面看到它的实际效果。除了对您的代码进行更改之外，我还在样式表中添加了一个类，该类在触发该事件时应用于您的元素。 

    $(() => {
    $('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>

    参见：jQuery mousedown() 方法

    • 0

  4. 实际上，您基本上必须监听 的三个事件Mouse，第一个是mousedown()，它在按下鼠标按钮时触发，第二个是mouseover以在鼠标经过td其表格时进行监听，最后一个mouseup是在鼠标位于松开.按钮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