寫項目的時候會遇到各種問題，寫這個項目我就遇到一次點擊多次觸發多次單擊事件的問題，這種問題是因爲你多次爲這個控件（元素/標籤）添加相同的事件，做事要有始有終，代碼也是這樣，當你爲一控件多次添加一個事件時，他並不是把上一個事件替換了，而是在上一個事件的基礎上疊加了，所以在爲控件多次添加事件時要刪除已有的事件
$('#bg').off()
我的農場 ⬇
代碼展示
![在這裏插入圖片描述]()
css代碼
<style>
*{
margin: 0;
}
.iBg{
/*背景*/
width:100%;
height: 780px;
position:absolute;
top:0px;
left:0px;
background: url("images/tu0.png");
}
img{
/*控制圖片*/
position:absolute;
top:85px;
left:195px;
}
#seed{
/*控制播種按鈕*/
background-image:url(images/btn_seed.png);
width:56px;
height:56px;
position:absolute;
top:695px;
left:250px;
cursor:hand;
}
#grow{
/*控制生長按鈕*/
background-image:url(images/btn_grow.png);
width:56px;
height:56px;
position:absolute;
top:695px;
left:350px;
cursor:hand;
}
#bloom{
/*控制開花按鈕*/
background-image:url(images/btn_bloom.png);
width:56px;
height:56px;
position:absolute;
top:695px;
left:450px;
cursor:hand;
}
#fruit{
/*控制結果按鈕*/
background-image:url(images/btn_fruit.png);
width:56px;
height:56px;
position:absolute;
top:695px;
left:550px;
cursor:hand;
}
.border{
/*當點擊操作按鈕時*/
border: 5px solid coral;
border-radius: 30px;
}
</style>
jquery代碼
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var img ;
$(document).ready(function(){
$('#bg').on('click',function () {
console.log('Y:'+event.clientY+'X:'+event.clientX);
})
function f(){//根據點擊內容顯示不同的圖片
$('#bg').off();//刪除上次爲$('#bg')設置的點擊事件
$("#bg").on("click",function(e){
if(e.clientX>84&&e.clientX<1469&&e.clientY>262&&e.clientY<724){//設置點擊事件範圍
$("<img src='images/"+img+"'/>").prependTo("#bg").css("top",e.clientY-60).css("left",e.clientX-50).on('click',function () {
$(this).remove();
});
}else{
$('#bg').off();//刪除
}
});
}
$("#seed").on("click",function(){ //綁定結果按鈕的單擊事件
$('span').removeClass('border');//將所有span上的邊框樣式刪掉
$(this).addClass('border');//給點擊的span加樣式
img = "seed.png";
f();
});
$("#grow").on("click",function(){ //綁定生長按鈕的單擊事件
$('span').removeClass('border');
$(this).addClass('border');
img = "grow.png";
f();
});
$("#bloom").on("click",function(){ //綁定開花按鈕的單擊事件
$('span').removeClass('border');
$(this).addClass('border');
img = "bloom.png";
f();
});
$("#fruit").on("click",function(){ //綁定結果按鈕的單擊事件
$('span').removeClass('border');
$(this).addClass('border');
img = "fruit.png";
f();
});
});
</script>
HTML代碼
<body>
<div id="bg" class="iBg" ></div>
<span id="seed"></span>
<span id="grow"></span>
<span id="bloom"></span>
<span id="fruit"></span>
</body>
