代码之家 › 专栏 › 技术社区 › ihsancemil

HTML上的onselectstart()函数

mouseevent css html javascript

ihsancemil · 技术社区 · 8 年前

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

我有这部分代码 windows.onload = function start() 功能。当我从上到下拖动鼠标时,我的上下文没有选择。然而,如果我从下往上拖动鼠标,我可以选择我想要的任何内容。有没有一种方法可以防止从上到下的拖动和反向拖动?

下面的完整代码:

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

你也可以在这个网站上看到结果

1 回复 | 直到 8 年前

Mosh Feu Alex Chen 8 年前

问题

这个 body 标签不能代替所有窗口:

解决方案 答案很简单。您需要设置 html (只是为了忍耐)和 身体 到 100% .

现在 身体 获取窗口和事件的大小 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>