Javascript - 按下按键后保持按下状态(返回 true)-6ren

Javascript - 按下按键后保持按下状态(返回 true)

转载作者：行者123 更新时间：2023-11-27 23:08:51

您必须先单击任意位置，以便注册按 Shift 键。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>

<head>

  <title>Display Coloring</title>

  <script src="jquery-2.2.1.min.js"></script>

  <style type="text/css">
    div {
      background-color: rgb(0, 0, 0);
      width: 20px;
      height: 20px;
      left: 0;
      top: 0;
      bottom: 0;
      line-height: 0;
      margin: 0;
      padding: 0;
      display: inline-block;
      float: left;
    }
    body {
      top: 0;
      left: 0;
      bottom: 0;
      margin: 0;
      padding: 0;
      margin: 0;
      width: 1920px;
      height: 1080px;
    }
    div:hover {
      background-color: rgb(0, 0, 0);
      background-color: rgba(255, 0, 0, 0.5);
    }
    input {
      float: left;
      width: 20px;
      height: 20px;
      top: 0;
      left: 0;
      bottom: 0;
      padding: 0;
      -webkit-appearance: none;
      background-color: rgba(0, 0, 0, 0);
      box-shadow: none !important;
      outline: none;
      border: none;
      word-spacing: 0;
      letter-spacing: 0;
    }
    #conDiv {
      width: 1920px;
      height: 1080px;
      background-color: transparent;
      position: absolute;
      z-index: 1;
    }
    #conInput {
      width: 1920px;
      height: 1080px;
      position: absolute;
      z-index: -1;
    }
  </style>

</head>

<body>

  <script>
    var body = document.body;

    a = [];
    b = [];
    c = [];
    i = [];
    d = [];
    clicked = [];
    altDown = false;

    window.onload = function() {

      conInput = document.createElement('div');
      conInput.setAttribute('id', 'conInput');
      document.body.appendChild(conInput);

      conDiv = document.createElement('div');
      conDiv.setAttribute('id', 'conDiv');
      document.body.appendChild(conDiv);

      //for(u=0;u<1911;u+=10){
      for (u = 0; u < 1901; u += 20) {

        a.push(u);

        for (v = 0; v < 1061; v += 20) {
          //for(v=0; v<1071; v+=10){

          b.push(v);

          var newDiv = document.createElement("div");
          newDiv.id = b.length - 1;
          conDiv.appendChild(newDiv);
        }
      }

      //for(u=0;u<1911;u+=10){

      //	for(v=0; v<1071; v+=10){
      for (u = 0; u < 1901; u += 20) {

        for (v = 0; v < 1061; v += 20) {

          c.push(v);

          var newInput = document.createElement("input");
          newInput.setAttribute('type', 'color');
          newInput.id = c.length - 1;

          conInput.appendChild(newInput);
        }
      }

      function marking() {

        $("body").on("keydown keyup", function(event) {

          if (event.type == "keydown") {
            console.log(event.type);
            $('div').hover(function() {
              if (event.keyCode == 16 && this.id !== "conDiv" && this.id !== "conInput") {
                clicked.push(this);
                this.style.backgroundColor = "#b3ffb3";
                console.log(event);
              }
            })
          } else {
            console.log(event);
            $('div').hover(function() {
              if (event.keyCode == 16) {
                //if()		    		
                if (this.id !== "conDiv" && this.id !== "conInput") {
                  this.style.backgroundColor = "#000000";
                  //console.log(event.shiftKey);
                }
              }
            })
          }
        })
      }

      function changeColor() {

        divs = body.getElementsByTagName('div');
        inputs = body.getElementsByTagName('input');

        for (var l = 0; l < inputs.length; l++) {

          if (inputs[l].id !== "conInput") {

            i.push(inputs[l]);

          }

        }

        for (var k = 0; k < divs.length; k++) {

          if (divs[k].id !== "conDiv" && divs[k].id !== "conInput") {

            d.push(divs[k]);

          }

        }

        $(document).ready(function() {

          $("body").bind("keydown", function(event) {

            if (event.altKey) {

              for (var h in d) {

                //if(d[h].id == "10272" && altDown == false){
                if (d[h].id == "2544" && altDown == false) {

                  d[h].style.opacity = "0.4";

                  altDown = true;

                }

                //else if(d[h].id == "10272" && altDown == true) {
                else if (d[h].id == "2544" && altDown == true) {

                  d[h].style.opacity = "1";

                  altDown = false;

                }

              }
            }
          });
        });

        $('div').on('click', function() {

          if (this.id != "conDiv" && this.id != "conInput") {

            if (event.ctrlKey) {

              clicked.push(this);

              for (var h in d) {

                if (d[h].id == this.id) {

                  $(d[h]).css('background-color', 'rgba(255, 255, 102, 0.8)');

                }

              }

            } else if (clicked.length > 0) {

              for (var clk in clicked) {

                target = document.getElementById(this.id);

                $(target).click();

                $(target).on('change', function() {

                  newColor = this.value;

                  parsed = newColor.charAt(0) == "#" ? newColor.substring(1, 7) : newColor;

                  r = parseInt(parsed.substring(0, 2), 16).toString();
                  g = parseInt(parsed.substring(2, 4), 16).toString();
                  b = parseInt(parsed.substring(4, 6), 16).toString();

                  newColorRGB = "(" + r + ", " + g + ", " + b + ")";

                  for (clk in clicked) {

                    clicked[clk].style.backgroundColor = newColor;
                    clicked[clk].setAttribute("title", newColorRGB);

                  }

                  clicked = [];

                });

              }

            } else if (clicked.length == 0) {

              for (var z in i) {

                if (i[z].id == this.id) {

                  target = document.getElementById(this.id);

                  $(target).click();

                  $(target).on('change', function() {

                    newColor = this.value;

                    parsed = newColor.charAt(0) == "#" ? newColor.substring(1, 7) : newColor;

                    r = parseInt(parsed.substring(0, 2), 16).toString();
                    g = parseInt(parsed.substring(2, 4), 16).toString();
                    b = parseInt(parsed.substring(4, 6), 16).toString();

                    newColorRGB = "(" + r + ", " + g + ", " + b + ")";

                    for (var h in d) {

                      if (d[h].id == this.id) {

                        d[h].style.backgroundColor = newColor;
                        d[h].setAttribute("title", newColorRGB);

                      }

                    }

                  });

                }
              }
            }

          }

        });

      }

      changeColor();
      marking();
    }
  </script>

</body>

</html>

如果我按下shiftKey，它就会起作用，并且div会获得它们的颜色，但如果我释放shiftKey，状态将保持true 并且它会一直着色直到刷新。

这是代码:

function marking(){
$("body").bind("keydown", function(event) {
    $('div').hover(function(){
        if(event.shiftKey){         
            if(this.id !== "conDiv" && this.id !== "conInput"){
            clicked.push(this);
            this.style.backgroundColor = "#b3ffb3";
            console.log(event.shiftKey);
            }
        }
        else{};
        }
    })
});

}

我可以以某种方式告诉程序在释放shiftKey时使用react吗？

更新

$("body").on("keydown keyup", function(event) {

       if(event.type == "keydown"){
            $('div').hover(function(){
                if(event.keyCode == 16 && this.id !== "conDiv" && this.id !== "conInput"){  
                clicked.push(this);
                this.style.backgroundColor = "#b3ffb3";
                console.log(event);
                }                           
            })
       }
       else{
            console.log(event);
            $('div').hover(function(){
                if(event.keyCode == 16){                    
                    if(this.id !== "conDiv" && this.id !== "conInput"){
                    this.style.backgroundColor = "#000000";
                    }
                }
            })
       }
})

现在它会更改 shiftKey 上的颜色并将 keyup 上的颜色更改为 #000000。但它仍然停留在 keydown 上，如果我将鼠标悬停在 div 上，它会将对象插入我的数组而不着色。

我希望它在按下 Shift 时着色，而在释放 Shift 时不执行任何操作。

我错过了什么？

最佳答案

您似乎需要的是 mousemove 事件以及 shiftKey event property .

现在的一个问题是，您没有取消按下 Shift 时设置的悬停处理程序。

主要区别是

  function marking() {
    $("body").on("mousemove", "div", function(event) {
        if (event.shiftKey) {
             this.style.backgroundColor "#b3ffb3";
        }
    })
  }

我修改了下面的代码

<!doctype html>
<html>

<head>

  <title>Display Coloring</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <style type="text/css">
    div {
      background-color: rgb(0, 0, 0);
      width: 20px;
      height: 20px;
      left: 0;
      top: 0;
      bottom: 0;
      line-height: 0;
      margin: 0;
      padding: 0;
      display: inline-block;
      float: left;
    }
    body {
      top: 0;
      left: 0;
      bottom: 0;
      margin: 0;
      padding: 0;
      margin: 0;
      width: 1920px;
      height: 1080px;
    }
    div:hover {
      background-color: rgb(0, 0, 0);
      background-color: rgba(255, 0, 0, 0.5);
    }
    input {
      float: left;
      width: 20px;
      height: 20px;
      top: 0;
      left: 0;
      bottom: 0;
      padding: 0;
      -webkit-appearance: none;
      background-color: rgba(0, 0, 0, 0);
      box-shadow: none !important;
      outline: none;
      border: none;
      word-spacing: 0;
      letter-spacing: 0;
    }
    #conDiv {
      width: 1920px;
      height: 1080px;
      background-color: transparent;
      position: absolute;
      z-index: 1;
    }
    #conInput {
      width: 1920px;
      height: 1080px;
      position: absolute;
      z-index: -1;
    }
  </style>

</head>

<body>

  <script>
    var body = document.body;

    a = [];
    b = [];
    c = [];
    i = [];
    d = [];
    clicked = [];
    altDown = false;

    window.onload = function() {

      conInput = document.createElement('div');
      conInput.setAttribute('id', 'conInput');
      document.body.appendChild(conInput);

      conDiv = document.createElement('div');
      conDiv.setAttribute('id', 'conDiv');
      document.body.appendChild(conDiv);

      //for(u=0;u<1911;u+=10){
      for (u = 0; u < 1901; u += 20) {

        a.push(u);

        for (v = 0; v < 1061; v += 20) {
          //for(v=0; v<1071; v+=10){

          b.push(v);

          var newDiv = document.createElement("div");
          newDiv.id = b.length - 1;
          conDiv.appendChild(newDiv);
        }
      }

      //for(u=0;u<1911;u+=10){

      //	for(v=0; v<1071; v+=10){
      for (u = 0; u < 1901; u += 20) {

        for (v = 0; v < 1061; v += 20) {

          c.push(v);

          var newInput = document.createElement("input");
          newInput.setAttribute('type', 'color');
          newInput.id = c.length - 1;

          conInput.appendChild(newInput);
        }
      }

      function marking() {

        $("body").on("mousemove", "div", function(event) {              
          if (event.shiftKey) {
             this.style.backgroundColor =  "#b3ffb3";
          }
        })
      }

      function changeColor() {

        divs = body.getElementsByTagName('div');
        inputs = body.getElementsByTagName('input');

        for (var l = 0; l < inputs.length; l++) {

          if (inputs[l].id !== "conInput") {

            i.push(inputs[l]);

          }

        }

        for (var k = 0; k < divs.length; k++) {

          if (divs[k].id !== "conDiv" && divs[k].id !== "conInput") {

            d.push(divs[k]);

          }

        }

        $(document).ready(function() {

          $("body").bind("keydown", function(event) {

            if (event.altKey) {

              for (var h in d) {

                //if(d[h].id == "10272" && altDown == false){
                if (d[h].id == "2544" && altDown == false) {

                  d[h].style.opacity = "0.4";

                  altDown = true;

                }

                //else if(d[h].id == "10272" && altDown == true) {
                else if (d[h].id == "2544" && altDown == true) {

                  d[h].style.opacity = "1";

                  altDown = false;

                }

              }
            }
          });
        });

        $('div').on('click', function() {

          if (this.id != "conDiv" && this.id != "conInput") {

            if (event.ctrlKey) {

              clicked.push(this);

              for (var h in d) {

                if (d[h].id == this.id) {

                  $(d[h]).css('background-color', 'rgba(255, 255, 102, 0.8)');

                }

              }

            } else if (clicked.length > 0) {

              for (var clk in clicked) {

                target = document.getElementById(this.id);

                $(target).click();

                $(target).on('change', function() {

                  newColor = this.value;

                  parsed = newColor.charAt(0) == "#" ? newColor.substring(1, 7) : newColor;

                  r = parseInt(parsed.substring(0, 2), 16).toString();
                  g = parseInt(parsed.substring(2, 4), 16).toString();
                  b = parseInt(parsed.substring(4, 6), 16).toString();

                  newColorRGB = "(" + r + ", " + g + ", " + b + ")";

                  for (clk in clicked) {

                    clicked[clk].style.backgroundColor = newColor;
                    clicked[clk].setAttribute("title", newColorRGB);

                  }

                  clicked = [];

                });

              }

            } else if (clicked.length == 0) {

              for (var z in i) {

                if (i[z].id == this.id) {

                  target = document.getElementById(this.id);

                  $(target).click();

                  $(target).on('change', function() {

                    newColor = this.value;

                    parsed = newColor.charAt(0) == "#" ? newColor.substring(1, 7) : newColor;

                    r = parseInt(parsed.substring(0, 2), 16).toString();
                    g = parseInt(parsed.substring(2, 4), 16).toString();
                    b = parseInt(parsed.substring(4, 6), 16).toString();

                    newColorRGB = "(" + r + ", " + g + ", " + b + ")";

                    for (var h in d) {

                      if (d[h].id == this.id) {

                        d[h].style.backgroundColor = newColor;
                        d[h].setAttribute("title", newColorRGB);

                      }

                    }

                  });

                }
              }
            }

          }

        });

      }

      changeColor();
      marking();
    }
  </script>

</body>

</html>

关于Javascript - 按下按键后保持按下状态(返回 true)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36359471/

c# - 应始终在导航到页面时加载 transient 状态，还是仅在从逻辑删除状态恢复时加载 transient 状态？
我正在通读 Windows Phone 7.5 Unleashed，有很多代码看起来像这样(在页面的代码隐藏中): bool loaded; protected override void OnNav
asp.net - 为什么我发送 201 状态，但在客户端收到 302 状态
在cgi服务器中，我这样返回 print ('Status: 201 Created') print ('Content-Type: text/html') print ('Location: htt
c - WSTOPSIG(状态) == 22 & WTERMSIG(状态) == 9;这些数字从何而来？
我正在查看 esh(easy shell)的实现，无法理解在这种情况下什么是 22 和 9 信号。理想情况下，有一个更具描述性的常量，但我找不到列表。最佳答案信号列表及其编号(包括您看到的这两个)
hadoop - Oozie Hive Action处于“准备”状态，作业处于“运行”状态
我的Oozie Hive Action 永远处于运行模式。 oozie.log文件中没有显示错误。
android - RFCOMM_CreateConnection - 已打开状态 :2, RFC 状态 :4, MCB 状态:5
我正在编写一个使用 RFCOMM 通过蓝牙连接到设备的 Android 应用程序。我使用 BluetoothChat 示例作为建立连接的基础，大部分时间一切正常。但是，有时由于出现套接字已打开的消息
firebase - Cloud Scheduler 作业命中 HTTPS 端点并记录失败(状态 502)，但服务器返回成功响应(状态 200)
我有一个云调度程序作业，它应该每小时访问我的 API 以更新一些价格。这些作业大约需要 80 秒才能运行。这是它的作用: POST https://www.example.com/api/jobs/
java - 我的 JSP 返回 202 (SC_ACCEPTED) 状态，但调用者获得 200 (SC_OK) 状态
我正在 Tomcat 上访问一个简单的 JSP 页面: 但是当我使用 curl 测试此页面时，我得到了 200 响应代码而不是预期的 202: $ curl -i "http://localhos
java - 具有 HTTP 状态 500 而不是 HTTP 状态 400 的 JAX-RS 响应
有时 JAR-RS 客户端会发送错误的语法请求正文。服务器应响应 HTTP status 400 (Bad Request) , 但它以 HTTP status 500 (Internal Serve
javascript - node-express 错误 : express deprecated res. 发送(状态) : Use res. 发送状态(状态)改为
我正在尝试通过 response.send() 发送一个整数，但我不断收到此错误 express deprecated res.send(status): Use res.sendStatus(sta
状态。如何将数据集转换为纯面板数据？
我已经用 Excel 和 Java 做过很多次了……这次我需要用 Stata 来做，因为保存变量更方便'labels .如何将 dataset_1 重组为下面的 dataset_2？我需要转换以下
数据库最佳实践 - 状态
我正在创建一个应用程序，其中的对象具有状态查找功能。为了提供一些上下文，让我们使用以下示例。帮助台应用程序，其中创建作业并通过以下工作流程移动: 新 - 工作已创建但未分配进行中 - 分配给工作人
Keras LSTM 状态
我想在 Keras 中运行 LSTM 并获得输出和状态。在 TF 中有这样的事情 with tf.variable_scope("RNN"): for time_step in range
Scala-GWT 状态
有谁知道 Scala-GWT 的当前状态项目？那里的主要作者 Grzegorz Kossakowski 似乎退出了这个项目，在 Spring 中从事 scalac 的工作。但是，在 interv
applescript - 访问内置电源管理器？状态
我正在尝试编写一个 super 简单的 applescript 来启动 OneDrive App , 或确保打开，当机器的电源设置为插入时，将退出，或确保关闭，当电源设置为电池时。我无法找到如何访问
angularjs - 单击链接时强制重新加载路线/状态
目前我正在做这样的事情 link.on('click', function () { if (link.attr('href') !== $route.current.originalPath
来自用户代理的 Javascript 状态
是否可以仅通过查看用户代理来检测浏览器上是否启用/禁用 Javascript。如果是，我应该寻找什么。如果否，检测用户浏览器是否启用/禁用 JavaScript 的最佳方法是什么最佳答案不，没有
Spring OSGi 状态
Spring 和 OSGi 目前的开发状况如何？最近好像有点安静了。文档的最新版本 ( http://docs.spring.io/osgi/ ) 来自 2009 年。我看到一些声明 Sprin
Java线程中断后处于 Activity 状态
我正在从主函数为此类创建一个线程，但即使使用 Thread.currentThread().interrupt() 中断它，输出仍然包含“Still Here”行。 public class Writ
Godog 在步骤之间传递参数/状态
为了满足并发要求，我想知道如何在 Godog 中的多个步骤之间传递参数或状态。 func FeatureContext(s *godog.Suite) { // This step is ca
ios - 如何获取子类中UIButton的默认突出显示颜色/状态？
我有一个UIButton子类，它不使用UIImage背景，仅使用背景色。我注意到的一件事是，当您设置按钮的背景图像时，有一个默认的突出显示状态，当按下按钮时，该按钮会稍微变暗。这是我当前的代码。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript - 按下按键后保持按下状态(返回 true)