suchen

Heim >Web-Frontend >js-Tutorial >So steuern Sie die Maus, um das Klicken auf die Schaltfläche in JS zu verweigern

So steuern Sie die Maus, um das Klicken auf die Schaltfläche in JS zu verweigern

亚连
亚连Original
2018-06-14 16:22:301991Durchsuche

Im Folgenden werde ich Ihnen ein Beispiel zeigen, wie JS die Maus so steuert, dass sie das Klicken auf eine bestimmte Schaltfläche verweigert. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

JS-Steuerschaltflächen dürfen nicht ausgewählt werden

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es für alle hilfreich ist in der Zukunft.

Verwandte Artikel:

So erhalten Sie die Top-N-Hauptfarbwerte eines Bildes in Javascript

So verbessern Sie die Leistung Verwenden von trackBy in Angular

So implementieren Sie das Minispiel zum Umdrehen von Karten im WeChat-Miniprogramm

So löschen Sie die angegebene Überlagerung mithilfe der Baidu-Karte API? Wie geht das konkret?

So erhalten Sie Bildinformationen im WeChat-Miniprogramm

So implementieren Sie Animationen im WeChat-Miniprogramm

So entfernen Sie die Markierungsüberlagerung bei der Verwendung von Baidu Maps

So erhalten Sie Benutzerinformationen im WeChat-Applet (ausführliche Anleitung)

Das obige ist der detaillierte Inhalt vonSo steuern Sie die Maus, um das Klicken auf die Schaltfläche in JS zu verweigern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So ermitteln Sie den aktuellen Zeitunterschied mit JSNächster Artikel：So ermitteln Sie den aktuellen Zeitunterschied mit JS

In Verbindung stehende Artikel

Mehr sehen