HTML 上的 onselectstart() 函数

Question

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

我的 windows.onload = function start() 函数中有这部分代码。当我将鼠标从上到下拖动时，我的上下文不是 selecting。但是，如果我将鼠标从底部拖到顶部，我可以 select 随心所欲。有什么方法可以防止从上到下和反向拖动吗？

完整代码如下：

<!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>

https://output.jsbin.com/niyijuqaco

您也可以在本站看到结果

Answer 1

问题

body标签不能代替所有window:

解决方法 那么，解决方案很简单。您需要将 html 的高度（只是为了忍受）和 body 设置为 100%.

现在，body 获取 window 和事件 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() 函数

onselectstart() function on HTML

html

javascript

css

mouseevent