admin管理员组

文章数量:1394183

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

I have this part of code in my windows.onload = function start()funtion. When I drag my mouse on top to down my context is not selecting. However If I drag my mouse from the bottom to top I can select whatever I want. Is there a way to prevent both dragging from top to bottom and reverse?

Full code below:

<!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>
document.body.onselectstart = function() {
   return false;
}

I have this part of code in my windows.onload = function start()funtion. When I drag my mouse on top to down my context is not selecting. However If I drag my mouse from the bottom to top I can select whatever I want. Is there a way to prevent both dragging from top to bottom and reverse?

Full code below:

<!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./niyijuqaco

You can also see the result on this site

  • javascript
  • html
  • css
  • mouseevent
Share Improve this question edited Mar 6, 2016 at 11:31 Mosh Feu 29.4k18 gold badges93 silver badges141 bronze badges asked Mar 6, 2016 at 10:20 ihsancemilihsancemil 4325 silver badges16 bronze badges 2
  • Can you add a snippet or bin? – Mosh Feu Commented Mar 6, 2016 at 10:53
  • @MoshFeu I add full code. – ihsancemil Commented Mar 6, 2016 at 11:15
Add a ment  | 

1 Answer 1

Reset to default 4

The problem

The body tag not take the place for all the window:

The solution Well, the solution is simple. You need to set the height of the html (just for be endure) and the body to 100%.

Now, the body take the size of the window and the event onselectstart firing.

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

本文标签： javascriptonselectstart() function on HTMLStack Overflow

版权声明：本文标题：javascript - onselectstart() function on HTML - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744714125a2621298.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。