Heim > Artikel > Web-Frontend > 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:301908Durchsuche
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+'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>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!