关于jq hover事件里click多次触发的问题

desongzhang

于 2021-03-04 23:17:05 发布

阅读量398

点赞数

分类专栏：小知识文章标签： jquery js javascript

本文链接：https://blog.youkuaiyun.com/desongzhang/article/details/114380451

版权

在实现jq轮播图淡入淡出效果时，将分页器和上一页下一页的点击事件放入hover事件导致了问题。当元素被移入移出时，点击事件被多次绑定，从而在点击分页器或导航按钮时，事件会按绑定次数重复执行。解决此问题的方法是在移除事件后取消绑定原有的事件处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在学习jq轮播图淡入淡出效果的时候，代码如下：

<script>
        var index = 0;
        var run = function () {
            index++;
            if (index > $("ul>li").length - 1) {
                index = 0;
            }
            $("ul>li").eq(index).stop(true, true).fadeIn(300).siblings().fadeOut(300);
            $("ol>li").eq(index).attr("style", "background:red").siblings().attr("style", "background:none");
        }
        var timer = setInterval(run, 3000);

        $("div").hover(function () {
            clearInterval(timer);
        }, function () {
            timer = setInterval(run, 3000);
        })

        // 分页器点击
        $("ol>li").click(function () {
            index = $(this).index();
            $("ul>li").eq(index).stop(true, true).fadeIn(300).siblings().fadeOut(300);
            $("ol>li").eq(index).attr