hover触发两次的问题

最新推荐文章于 2023-06-27 14:46:58 发布

mr.杰瑞

最新推荐文章于 2023-06-27 14:46:58 发布

阅读量2.3k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/jerryvd/article/details/94447827

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一个页面想通过hover来代替click ,遇到多次触发的问题，下面是处理代码
思路
1.鼠标移动到指定标签设置定时器
2.移除后清除定时器，防止重复触发

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        div{
            width: 500px;
            height: 200px;
            margin: 100px auto;
        }
        a{
            font-size: 25px;
            text-decoration: none;
        }
        a:hover{
            background-color:#96e7e0 ;
            color: red;
        }
    </style>
</head>
<body>
<div>
    <a id="a" href="#">奖品列表</a>
    <ul>
    <li id="prizes">这个是奖品</li>
    </ul>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    // on（"mouseover",function(){"鼠标移入时想要的效果"
    // $("#a").hover(function(){
    $("#a").on("mouseover",function(){
        var data={a:123};
        $.ajax({
            url:"index.php",
            type:"post",
            data: data,
            dataType:"json",
            success:function(res){
                if(res.code == 1) {
                    setTimeout(function(){
                    var html = [];
                    for(var i=0; i<res.prize.length; i++){
                        if(res.prize[i].goods_id == 5){
                            html.push('<li>一个'+res.prize[i].goods_id+'</li>');
                        }else{
                            html.push('<li>一个'+res.prize[i].goods_id+'</li>');
                        }
                    }
                    $('#prizes').append(html.join(''));
                    },1000);
                }else{
                    $('#prizes').html('');
                }

            }
        });
    });
    //鼠标移除清除定时器
    $("#a").on("mouseout",function(){
        clearTimeout(t);
    })


</script>
</body>
</html>

index.php

$a = $_POST['a'];
$prize = array(
    array('goods_id'=>'苹果'),
    array('goods_id'=>'橘子')
);
if($a==123)
{
    exit(json_encode(array('code'=>1,'msg'=>'success','prize'=>$prize)));
}