suchen

Heim >Web-Frontend >js-Tutorial >Teilen Sie Beispiele dafür, wie JS die Maus so steuert, dass sie das Klicken auf eine bestimmte Schaltfläche verweigert

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

小云云
小云云Original
2017-12-29 14:04:251454Durchsuche

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>

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!

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：Beispiel für die gemeinsame Nutzung eines einfachen schwebenden Kollisionseffekts mit JSNächster Artikel：Beispiel für die gemeinsame Nutzung eines einfachen schwebenden Kollisionseffekts mit JS

In Verbindung stehende Artikel

Mehr sehen