时间戳

首页 > 解决方案 > 如何让我的鼠标悬停不覆盖我的鼠标点击？

javascript - 如何让我的鼠标悬停不覆盖我的鼠标点击？

问题描述

我正在使用 JavaScript 开发数独游戏，我需要一些鼠标事件方面的帮助。我希望用户能够将鼠标悬停在一个正方形和正方形上以改变颜色。我还希望用户能够单击一个正方形并突出显示整个行、列和象限。现在，它们中的任何一个都可以工作，但不能同时工作。单击时，我希望用户仍然能够将鼠标悬停在其他方块上，而不会覆盖单击事件。

"use strict";

let table = "<table>"; //initialize a table tag
let q = 1; // a counter for quadrants
let puzzle1 = [ [ 0, 0, 4,   0, 0, 0,   0, 6, 7 ],
            [ 3, 0, 0,   4, 7, 0,   0, 0, 5 ],
            [ 1, 5, 0,   8, 2, 0,   0, 0, 3 ],

            [ 0, 0, 6,   0, 0, 0,   0, 3, 1 ],
            [ 8, 0, 2,   1, 0, 5,   6, 0, 4 ],
            [ 4, 1, 0,   0, 0, 0,   9, 0, 0 ],

            [ 7, 0, 0,   0, 8, 0,   0, 4, 6 ],
            [ 6, 0, 0,   0, 1, 2,   0, 0, 0 ],
            [ 9, 3, 0,   0, 0, 0,   7, 1, 0 ] ];

// c = row and r = column. I don't know how that happened
for (let c = 0; c < puzzle1.length; c++) // a for loop for a 2D array - this is the rows
{
    table += "<tr id='row-" + (c+ 1) + "'>"; //set up the rows
    for (let r = 0; r < puzzle1[0].length; r++) // this is the column
    {
        /* Quadrant
            1 2 3  |
            4 5 6  |
            7 8 9  |
          ----------
        */


        //trying to sort out the quadrants
        if (c < 3 && r < 3) q = 1;
        else if (c < 3 && r < 6) q = 2;
        else if (c < 3 && r < 9) q = 3;
        else if (c < 6 && r < 3) q = 4;
        else if (c < 6 && r < 6) q = 5;
        else if (c < 6 && r < 9) q = 6;
        else if (c < 9 && r < 3) q = 7;
        else if (c < 9 && r < 6) q = 8;
        else if (c < 9 && r < 9) q = 9;

        // add a table cell and give it an id with the row, column, quadrant, and number stored inside
        table += "<td id='row-" + (c + 1) + "col-" + (r + 1) + "quad-" + q + "num-" + puzzle1[c][r] + "'>";
        if (puzzle1[c][r] != 0) // 0 = empty cell
            table += puzzle1[c][r] // this is going through a 2D array in another file and adding the numbers in if they are not 0
        else // if the cell is empty then add an input box
            table += "<input class='empty' maxlength='1' id='row-" + (c + 1) + "col-" + (r + 1) + "quad-" + q + "'>"; 

        table += "</td>"
    }
    table += "</tr>"
}

table += "</table>";

//add the table to the html file
document.getElementById("board").innerHTML = table;

let clicked = false;

/*
window.onload = init;

function init(e) {

}
*/
// gather up all of the table cells
var cell = document.getElementsByTagName("td");

//assign the events and the procedures
for (let i = 0; i < cell.length; i++) {
    cell[i].onclick = highlight;
    cell[i].onmouseover = hover;
}
         

// create a variable that holds the style tag
let cellStyle = document.getElementById("highlight");

function highlight(e) { //highlight the entire 3x3 block and the row and col
    /* 
         1 2 3
       1 * * *
       2 * * * 
       3 * * *    
    
    */

    // row-xcol-yquad-znum-c
    // gather the id assigned to each table cell and then organize them in appropriate variables
    let cellID = e.target.id;
    let cellRow = cellID.substring(0, 5);
    let cellCol = cellID.substring(5, 10);
    let quadrant = cellID.substring(10, 16);
    let cellNum = cellID.substring(16)
    let s = ""; //style variable

    
    // highlight colors
    s += "td[id*='" + cellRow + "'], input[id*='" + cellRow + "'] {background-color: #E2E7ED;}";
    s += "td[id*='" + cellCol + "'], input[id*='" + cellCol + "'] {background-color: #E2E7ED;}"
    s += "td[id*='" + quadrant + "'], input[id*='" + quadrant + "'] {background-color: #E2E7ED;}";
    s += "td#" + cellID + ", input#" +  cellID + "{background-color: #BBDEFB;}";
    s += "td[id*='" + cellNum + "'] {background-color: #CBDBED;}";
    cellStyle.innerHTML = s;
    console.log(cellRow + " " + cellCol + " " + quadrant + " " + cellNum);
    clicked = !clicked;
}

function hover(e) // highlight the cell that the mouse is hovering over
{
    let cellID = e.target.id;
    let x = "";
    x += "td#" + cellID + ", input#" +  cellID + "{background-color: #BBDEFB;}";
    cellStyle.innerHTML = x;
}
<!DOCTYPE html>

<html>
    <head>
        <title>Sudoku</title>
        <script src="puzzle.js" defer></script>
        <script src="game.js" defer></script>
        <link href="style.css" rel="stylesheet" />

        <style id="highlight">
        
        </style>
    </head>

    <body>
        <div id="board"></div>

        <div id="buttons"></div>
    </body>
</html>

这是CSS部分。

@charset "utf-8";

html, body {
    width: 100%;
}

table, td {
    border: 1px solid black;
    padding: 0;
    border-spacing: 0;
}

table {
    margin: auto;
}

td {
    width: 75px;
    height: 75px;
    text-align: center;
    font-size: 35px;
}

table td:nth-of-type(3n) {
    border-right: 5px solid black;
}

table tr:nth-of-type(3n) td{
    border-bottom: 5px solid black;
}

table td:first-child {
    border-left: 5px solid black;
}

table tr:first-child td {
    border-top: 5px solid black;
}

input {
  width: 100%;
  height: 100%;
}

.empty {
    background-color: rgb(255, 255, 255);
    border: 0;
    text-align: center;
    font-size: 35px;
    font-family: 'Times New Roman', Times, serif;
    color: transparent;
    text-shadow: 0 0 0 blue;
}

.empty:focus {
    outline: none;
}

td#row1 {
    background-color: white;
}

#board, input {
    cursor: pointer;
}

标签： javascripthtml

解决方案

您可以使用 css https://www.w3schools.com/csSref/sel_hover.asp设置悬停样式 ，并将活动类添加到需要在用户单击列时突出显示的所有列。

const $col = $('.col');

$col.hover(event => $col.removeClass('active'));
$col.on('click', event => {
  const col = $(event.target).data('col');
  const row = $(event.target).data('row');
  
  $col.removeClass('active');
  $(`[data-col="${col}"]`).addClass('active');
  $(`[data-row="${row}"]`).addClass('active');
});
.col {
  border: 1px solid #000;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: white;
}

.col:hover {
  background-color: grey;
}

.col.active {
  background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table">
  <div class="row row-1">
    <div class="col col-1" data-row="1" data-col="1"></div>
    <div class="col col-2" data-row="1" data-col="2"></div>
    <div class="col col-3" data-row="1" data-col="3"></div>
  </div>
  <div class="row row-2">
    <div class="col col-1" data-row="2" data-col="1"></div>
    <div class="col col-2" data-row="2" data-col="2"></div>
    <div class="col col-3" data-row="2" data-col="3"></div>
  </div>
  <div class="row row-3">
    <div class="col col-1" data-row="3" data-col="1"></div>
    <div class="col col-2" data-row="3" data-col="2"></div>
    <div class="col col-3" data-row="3" data-col="3"></div>
  </div>
</div>

推荐阅读