右クリック禁止とmouseover

JavaScript

Last updated at 2024-09-30Posted at 2024-09-30

毎日javascriptを学習します

コピペですが
本日のテーマは、

mouseover
mouseleave
右クリック禁止


<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <style media="screen">
      #box {
        width: 100px;
        height: 100px;
        background-color: grey;
      }
    </style>
  </head>
  <body>
 
    <div id="box"></div>
 
    <script type="text/javascript">
    
    //右クリック禁止
    document.oncontextmenu = function () {return false;}
    
    const box = document.getElementById('box');

 　　//マウスを載せたらオレンジ色になる
    box.addEventListener('mouseover', function() {
      box.style.backgroundColor = 'orange';
    });

    //マウスを外すとグレーに戻る
     box.addEventListener('mouseleave', function() {
      box.style.backgroundColor = 'grey';
    });
    
    </script>
  </body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up