Question

document.body.onselectstart = function() {
   return false;
}

我在windows.onload = function start()功能中有这部分代码。当我将鼠标拖到上下时，我的上下文没有选择。但是，如果我将鼠标从底部拖到顶部，我可以选择我想要的任何内容。有没有办法防止从上到下拖动并反转？

以下完整代码：

＆＃13;

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body oncontextmenu="return false;">

    Value:<br> <p id="Value"> 0 </p>

    <p>Click the ball to increase the value.</p>

    <input type="image" onmousedown="increase()" src="RedBall.png" id="demp" style="position:relative; left: 500px; top: 80px; width: 32px; height: 32px;" />


    <script>
      function increase() {
        var x = document.getElementById("Value").innerHTML;
        var increased = parseInt(x,10) + parseInt(1,10);
        document.getElementById("Value").innerHTML = increased;
      }

      function change(){
        var num = 0;
        window.setInterval(function(){
          var speedx= Math.floor((Math.random() * 11) - 5);
          var speedy= Math.floor((Math.random() * 11) - 5);
          document.getElementById("demp").style.left= parseInt(document.getElementById("demp").style.left, 10) + parseInt(speedx,10) +"px"; 
          document.getElementById("demp").style.top= parseInt(document.getElementById("demp").style.top, 10) + parseInt(speedy,10) +"px"; 
        }, 10)
      }
      window.onload = function start() {
        change();
        document.body.onselectstart = function() {
          return false;
        }
      }
    </script>
  </body>
</html>

＆＃13;

https://output.jsbin.com/niyijuqaco

您还可以在此网站上看到结果

Answer 1

问题

body标记不代表所有窗口：

解决方案 嗯，解决方案很简单。您需要设置html（仅用于忍受）和body到100%的高度。

现在，body采用窗口大小和事件onselectstart触发。

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
        height:100%;
      }
    </style>
  </head>
  <body oncontextmenu="return false;">

    Value:<br> <p id="Value"> 0 </p>

    <p>Click the ball to increase the value.</p>

    <input type="image" onmousedown="increase()" src="RedBall.png" id="demp" style="position:relative; left: 500px; top: 80px; width: 32px; height: 32px;" />


    <script>
      function increase() {
        var x = document.getElementById("Value").innerHTML;
        var increased = parseInt(x,10) + parseInt(1,10);
        document.getElementById("Value").innerHTML = increased;
      }

      function change(){
        var num = 0;
        window.setInterval(function(){
          var speedx= Math.floor((Math.random() * 11) - 5);
          var speedy= Math.floor((Math.random() * 11) - 5);
          document.getElementById("demp").style.left= parseInt(document.getElementById("demp").style.left, 10) + parseInt(speedx,10) +"px"; 
          document.getElementById("demp").style.top= parseInt(document.getElementById("demp").style.top, 10) + parseInt(speedy,10) +"px"; 
        }, 10)
      }
      window.onload = function start() {
        change();
        document.body.onselectstart = function() {
          return false;
        }
      }
    </script>
  </body>
</html>

HTML上的onselectstart（）函数

1 个答案: