JS控制鼠标拒绝点击某一按钮的实例

2024-05-06 16:41:39

字体：大中小

来源：转载

供稿：网友

JS控制按钮禁止被选择

<!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; } div{  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> <div id="main"> <span>亲爱的我爱你，你爱我吗？</span> <section> <button id="s" style="padding:1px 10px;">不</button>  <button id="w" style="padding:1px 10px;">爱</button> </section>  </div><div 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;"></div></body></html>

以上这篇JS控制鼠标拒绝点击某一按钮的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：JS实现简单的浮动碰撞效果示例

下一篇：JS计算距当前时间的时间差实例