JS控制鼠標(biāo)拒絕點擊某一按鈕的實例

更新時間：2017年12月29日 08:28:59 作者：玉面靈狐

下面小編就為大家分享一篇JS控制鼠標(biāo)拒絕點擊某一按鈕的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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控制鼠標(biāo)拒絕點擊某一按鈕的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js控制一個按鈕是否可點擊(可使用)disabled的實例

相關(guān)文章

js按條件生成隨機json:randomjson實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s按條件生成隨機json:randomjson實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
webpack+express實現(xiàn)文件精確緩存的示例代碼
這篇文章主要介紹了webpack+express實現(xiàn)文件精確緩存的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
layui監(jiān)聽工具欄的實例(操作列表按鈕)
今天小編就為大家分享一篇layui監(jiān)聽工具欄的實例(操作列表按鈕)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
IE11下使用canvas.toDataURL報SecurityError錯誤的解決方法
這篇文章主要給大家介紹了關(guān)于在IE11下使用canvas.toDataURL報SecurityError錯誤的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對同樣遇到這個問題的朋友們具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-11-11
javascript實現(xiàn)去除HTML標(biāo)簽的方法
這篇文章主要介紹了javascript實現(xiàn)去除HTML標(biāo)簽的方法,涉及javascript正則替換相關(guān)操作技巧,需要的朋友可以參考下
2016-12-12
JavaScript實現(xiàn)彈出DIV層同時頁面背景漸變成半透明效果
這篇文章主要介紹了JavaScript實現(xiàn)彈出DIV層同時頁面背景漸變成半透明效果,涉及JavaScript彈出窗口的實現(xiàn)及頁面元素屬性動態(tài)變換的相關(guān)技巧,需要的朋友可以參考下
2016-03-03
對于Form表單reset方法的新認(rèn)識
HTML中Form表單的reset方法被用來清空用戶所輸入的內(nèi)容，以前一直誤以為其是單純的將input等輸入項中的值清空
2014-03-03
微信小程序?qū)崙?zhàn)之打卡時鐘的繪制
這篇文章主要介紹了如何利用微信小程序制作一個打卡時鐘，分為工作和休息兩種狀態(tài)，用戶可以設(shè)置相應(yīng)的時間，所有的時鐘記錄都會被保存下來，感興趣的可以了解一下
2022-04-04
JS實現(xiàn)textarea通過換行或者回車把多行數(shù)字分割成數(shù)組并且去掉數(shù)組中空的值
這篇文章主要介紹了JS實現(xiàn)textarea通過換行或者回車把多行數(shù)字分割成數(shù)組并且去掉數(shù)組中空的值的相關(guān)資料,需要的朋友可以參考下
2018-10-10
JavaScript實現(xiàn)電商平臺商品細(xì)節(jié)圖
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)電商平臺商品細(xì)節(jié)圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06