Teilen Sie Beispiele dafür, wie JS die Maus so steuert, dass sie das Klicken auf eine bestimmte Schaltfläche verweigert-js-Tutorial-php.cn

Teilen Sie Beispiele dafür, wie JS die Maus so steuert, dass sie das Klicken auf eine bestimmte Schaltfläche verweigert

小云云

Freigeben： 2017-12-29 14:04:25

Original

1353 Leute haben es durchsucht

Dieser Artikel enthält hauptsächlich ein Beispiel dafür, 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. Lassen Sie uns dem Editor folgen und einen Blick darauf werfen. Ich hoffe, er kann jedem helfen, die Technologie der JS-Steuerung der Maus zu beherrschen, um das Klicken auf eine bestimmte Schaltfläche zu verweigern.

JS-Steuerschaltfläche darf 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+'px';
   this.style.left=x+'px';
   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

Verwandte Empfehlungen:

JS steuert Mausereignisbewegung und Entfernungseffekt display_javascript skills

Implementierung des JS-Mausklickereignisses

jsp js Beispiel für das Ausblenden, wenn sich die Maus in den angegebenen Bereich bewegt, und zeigt die Registerkarte an, wenn sie ihn verlässt

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele dafür, wie JS die Maus so steuert, dass sie das Klicken auf eine bestimmte Schaltfläche verweigert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!