jquery简单的小项目(我的农场)&jquery单击事件&事件一次点击多次触发解决方法

最新推荐文章于 2022-09-02 10:31:48 发布

孟某人

最新推荐文章于 2022-09-02 10:31:48 发布

阅读量354

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_44784185/article/details/102730004

版权

jQuery 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

写项目的时候会遇到各种问题，写这个项目我就遇到一次点击多次触发多次单击事件的问题，这种问题是因为你多次为这个控件（元素/标签）添加相同的事件，做事要有始有终，代码也是这样，当你为一控件多次添加一个事件时，他并不是把上一个事件替换了，而是在上一个事件的基础上叠加了，所以在为控件多次添加事件时要删除已有的事件

 $('#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>

孟某人

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录