So steuern Sie die Maus, um das Klicken auf die Schaltfläche in JS zu verweigern-js-Tutorial-php.cn

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

亚连

Freigeben： 2018-06-14 16:22:30

Original

1960 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!