JSでボタンのクリックを拒否するようにマウスを制御する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JSでボタンのクリックを拒否するようにマウスを制御する方法

亚连

Jun 14, 2018 pm 04:22 PM

js ボタンねずみ

以下に、特定のボタンのクリックを拒否するようにマウスを制御する JS の例を紹介します。これは良い参考値であり、皆さんの役に立つことを願っています。

JSコントロールボタンの選択は禁止です

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script>
 window.onload=function(){
 
  document.getElementById("s").onmouseover=function(evet){
   
   var _x=this.offsetLeft;
   var _y=this.offsetTop;
   var x=Math.random()*180+Math.random()*50;
   var y=Math.random()*120+Math.random()*50;
   this.style.position="absolute";
   this.style.top=y+&#39;px&#39;;
   this.style.left=x+&#39;px&#39;;
   return false;

  }
  document.getElementById("s").onclick=function(){
  alert("就知道你心里想的和表面做的是相反的！");
  document.getElementById("main").style.display="none";
  document.getElementById("img").style.display="block";
  }
  document.getElementById("w").onclick=function(){
  alert("宝贝：谢谢你的爱!我爱你╮(╯▽╰)╭");
  document.getElementById("main").style.display="none";
  document.getElementById("img").style.display="block";
  }
}

 </script>
 <style>
 *{
 margin:0;
 padding:0;
 }
 html{
 height: 100%;
 background:url(http://img17.3lian.com/d/file/201702/13/9524e4e08e99e0423f9e9f299e314c72.gif) no-repeat; 
 background-size: cover;
 }
 span{
 width: 100%;
 height: 100px;
 display: block;
 text-align: center;
 line-height: 100px;
 color: #fff;
 }
 section{
 }
 section button:nth-child(1){
 position: absolute;
 background: #DE7C2C;
 left: 100px;
 border: 0;
 z-index: 1;
 }
 section button:nth-child(2){
 position: absolute;
 z-index: 0;
 border: 0;
 background: #DE7C2C;
 left: 150px;
 }
 p{
  width:300px; 
  height:200px; 
  background:rgba(34,93,146,.7); 

  border:1px solid #eee; 
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
 }
 </style>
</head>
<body>
 <p id="main">
 <span>亲爱的我爱你，你爱我吗？</span>
 <section>
 <button id="s" style="padding:1px 10px;">不</button>
  <button id="w" style="padding:1px 10px;">爱</button>
 </section>
  
</p>
<p id="img" style=" display:none; width:100%; height:100%; background:url(http://upfile.asqql.com/2009pasdfasdfic2009s305985-ts/2017-8/20178172014060928.gif) no-repeat; background-size:cover;"></p>
</body>
</html>

ログイン後にコピー

以上、皆さんの参考になれば幸いです。

JavaScriptで画像の上位N個のメインカラー値を取得する方法

AngularでtrackByを使用してパフォーマンスを向上させる方法

フリップカードゲームをJavaScriptで実装する方法WeChat ミニプログラム

Baidu Maps API を使用して指定されたオーバーレイをクリアする方法具体的にはどうすればよいですか?

WeChatミニプログラムで写真情報を取得する方法

WeChatミニプログラムでアニメーションを実装する方法

百度地図を使用するときにマーカーオーバーレイを削除する方法

WeChatミニプログラム内プログラム内でユーザー情報を取得する方法（詳細なチュートリアル）

以上がJSでボタンのクリックを拒否するようにマウスを制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1664

CakePHP チュートリアル

1423

Laravel チュートリアル

1318

PHP チュートリアル

1269

C# チュートリアル

1248

Related knowledge

Win11 でタスクバーのサムネイルプレビューを無効にする方法は? マウスを移動してタスクバーアイコンのサムネイル表示テクニックをオフにする Feb 29, 2024 pm 03:20 PM

この記事では、Win11システムでタスクバーアイコンをマウスで移動したときに表示されるサムネイル機能をオフにする方法を紹介します。この機能はデフォルトでオンになっており、ユーザーがタスクバー上のアプリケーションアイコンの上にマウスポインタを置くと、アプリケーションの現在のウィンドウのサムネイルが表示されます。ただし、一部のユーザーは、この機能があまり役に立たない、またはエクスペリエンスに悪影響を与えると感じ、オフにしたい場合があります。タスクバーのサムネイルは楽しい場合もありますが、気が散ったり煩わしい場合もあります。この領域にマウスを移動する頻度を考えると、重要なウィンドウを誤って閉じてしまったことが何度かある可能性があります。もう 1 つの欠点は、より多くのシステムリソースを使用することです。そのため、リソース効率を高める方法を探している場合は、それを無効にする方法を説明します。しかし

Razer | Pokémon Gengar ワイヤレスマウスとマウスパッドが登場、セット価格は 1,549 元 Jul 19, 2024 am 04:17 AM

7 月 12 日のこのサイトのニュースによると、Razer は本日、Razer|Pokémon Gengar ワイヤレスマウスとマウスパッドの発売を発表しました。単品価格はそれぞれ1,299元、299元、2製品を含むパッケージ価格は1,549元。 Razer が Gengar と提携した周辺機器製品を発売するのはこれが初めてではありません。2023 年に Razer は Gengar スタイルの Yamata Orochi V2 ゲーミングマウスを発売しました。今回発売される2商品は、いずれもゴースト、ゴースト、ゲンガーの姿をイメージした濃い紫色を基調に、その3匹のポケモンとモンスターボールの輪郭がプリントされており、中央にキャラクターのゲンガーが描かれている。古典的なゴーストタイプのポケモンの大きくてカラフルな画像。このサイトでは、Razer|Pokémon Gengar ワイヤレスマウスが、以前にリリースされた Viper V3 Professional Edition に基づいていることがわかりました。全体の重量は 55g で、Razer の第 2 世代 FOC を搭載しています。

Microsoft Word ではマウスを使用してテキストを選択または強調表示できません Feb 20, 2024 am 09:54 AM

この記事では、Microsoft Word でマウスでテキストを選択または強調表示できない場合に発生する可能性のある問題と、その解決方法について説明します。 Microsoft Word でテキストを選択できないのはなぜですか? MSWord でテキストを選択できない場合は、アクセス許可の制限、ドキュメントの保護、マウスドライバーの問題、ファイルの破損など、さまざまな理由が影響している可能性があります。これらの問題に対する解決策を以下に示します。 Microsoft Word がマウスを使用してテキストを選択または強調表示できない問題を修正する Microsoft Word がマウスを使用してテキストを選択または強調表示できない場合は、以下の解決策に従ってください: マウスの左ボタンが機能していることを確認してくださいファイルを変更する資格があるかどうかを確認してくださいマウスのドライバーを更新してください

HP、Professional 1 3モードソフトマウスを発売：4000DPI、Blue Shadow RAW3220、初期価格99元 Apr 01, 2024 am 09:11 AM

3月31日のこのウェブサイトのニュースによると、HPは最近JD.comでProfessor1 3モードBluetoothマウスを発売し、黒と白のミルクティー色があり、初期価格は99元で、保証金10元が必要です。報道によると、このマウスは重さ106グラム、人間工学に基づいたデザインを採用し、寸法127.02x79.59x51.15mm、オプションで7つの4000DPIレベルがあり、Blue Shadow RAW3220センサーを搭載し、650mAhのバッテリーを使用することができるとのことです。 1回の充電で2か月使用可能。このサイトに添付されているマウスパラメータ情報は次のとおりです。

VGN との提携ブランド「Elden's Circle」キーボードおよびマウスシリーズ製品が店頭に並びました: Lani / Faded One カスタムテーマ、99 元から Aug 12, 2024 pm 10:45 PM

8月12日のこのサイトのニュースによると、VGNは8月6日に、Lani/Faded Oneのカスタマイズされたテーマでデザインされたキーボード、マウス、マウスパッドを含む共同ブランドの「Elden Ring」キーボードおよびマウスシリーズを発売しました。の製品はJD.comに掲載されており、価格は99元からです。このサイトに添付されている共同ブランドの新製品情報は次のとおりです。 VGN丨Elden Law Ring S99PRO キーボードこのキーボードは、純粋なアルミニウム合金シェルを使用し、5 層サイレンサー構造によって補完され、GASKET 板バネ構造を使用し、単一の- キースロット付き PCB、独自の高さの PBT 素材キーキャップ、アルミニウム合金のパーソナライズされたバックプレーン、VHUB に接続された 3 つのモード接続と SMARTSPEEDX 低遅延テクノロジーをサポートし、549 元から複数のデバイスをワンストップで管理できます。 VGN丨Elden French Ring F1PROMAX ワイヤレスマウスマウス

Razer マウスドライバーはどのフォルダーにありますか? Mar 02, 2024 pm 01:28 PM

多くのユーザーは、Razer ドライバーによってインストールされたファイルがどこに行くのか知りません。これらのドライバーファイルは、通常、コンピューターの C ドライブであるシステムディスクにインストールされます。特定の場所は、programfile の RAZE フォルダーにあります。 Razer マウスドライバーはどのフォルダーにありますか? A: システム C ドライブの Programfiles の下の RAZE フォルダーにあります。通常、ドライバーは C ドライブにインストールされます。場所に応じて見つけてください。 Razer マウスドライバーのインストール方法の紹介 1. 公式 Web サイトからファイルをダウンロードした後、ダウンロードした EXE ファイルをダブルクリックして実行します。 2. ソフトウェアがロードされるまで待ちます。 3. ここで、インストールするドライバーを選択できます。 4. 選択後、右下の「インストール」をクリックします。

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネットアプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワークインタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザーエクスペリエンスが向上することが挙げられます。欠点としては、モデルサイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピュータービジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

電源ボタンを押してもラップトップが起動しないのはなぜですか? Mar 10, 2024 am 09:31 AM

Windows ラップトップが起動しない理由はいくつか考えられます。メモリ障害、バッテリー切れ、電源ボタンの故障、またはハードウェアの問題はすべて一般的な原因です。この問題の解決に役立つ解決策をいくつか紹介します。電源ボタンを押してもラップトップの電源が入らない電源ボタンを押しても Windows ラップトップの電源がオンにならない場合は、問題を解決するために次の手順を実行してください。ラップトップは完全に充電されていますか?ハードリセットを実行してラップトップをクリーニングします。メモリを取り付け直します。透明 CMOS タイプのバッテリーを取り付けます。ラップトップを修理に持っていきます。 1] ラップトップは完全に充電されていますか?最初に行うことは、ラップトップが完全に充電されているかどうかを確認することです。バッテリーが消耗するとノートパソコンが起動しなくなる

See all articles

JSでボタンのクリックを拒否するようにマウスを制御する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック