写项目的时候会遇到各种问题,写这个项目我就遇到一次点击多次触发多次单击事件的问题,这种问题是因为你多次为这个控件(元素/标签)添加相同的事件,做事要有始有终,代码也是这样,当你为一控件多次添加一个事件时,他并不是把上一个事件替换了,而是在上一个事件的基础上叠加了,所以在为控件多次添加事件时要删除已有的事件
$('#bg').off()
我的农场 ⬇
代码展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/274e01b6912054e0ecaf7202979f2dcb.gif)
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>