单击运行两次

on Click running twice

本文关键字：两次 运行 单击      更新时间：2023-09-26

http://jsfiddle.net/uTV5k/19/

你好，

我在我的移动网站上使用以下脚本。请参阅模拟脚本和标记的jsfiddle。

下面的脚本正是我的移动网站上的内容，js fiddle就是它的复制品

在jsfiddle中，点击交替操作很好。第一次单击将打开动画，第二次单击将关闭动画。

我的移动网站上的问题，第一次点击打开动画，第二次点击后立即运行。但在小提琴中，它运行良好。


$(window).load(function(){
    $(window).bind("orientationchange resize", function(e) {
        $('.home-mod').each(function() {
            var homeModule  = $(this).height(),
                homeTitle   = $(this).find('.home-title-button').outerHeight(),
                homeStart   = homeModule - homeTitle,
                homeOpen    = false;
            $(this).find('.mod-info').css("top", homeStart + "px");
            $(this).on('click', function () {
                if (homeOpen) {
                    // second click alternation
                    $(this).find('.mod-info').animate({ top: homeStart + "px" });
                    homeOpen = false;
                } else {
                    // first click alternation
                    $(this).find('.mod-info').animate({ top: 0 });
                    homeOpen = true; 
                }
            });
        }); 
    }).trigger("resize");
});



我真的不知道为什么会发生这种事。在iScroll中使用这个应该不会引起任何问题，是吗？

提前感谢

首先：窗口加载发生

您正在呼叫

.trigger("resize");

这在点击时激活绑定。

later on-如果窗口加载再次发生-它会再次触发代码-重新绑定点击

fiddle代码和实时代码之间的区别在于存在调整大小/方向处理程序。

所有其他代码都在里面，这意味着每次运行调整大小处理程序时都会运行它。http://jsfiddle.net/uTV5k/20/是你摆弄那个处理程序的变种。它行为不端。

您可以先删除旧的单击处理程序，然后再使用.off('click')添加新的单击处理。

此fiddle包含了此更新，并且似乎再次出现：http://jsfiddle.net/uTV5k/21/

解决此问题的另一种（可能更好）方法是重新计算调整大小时所需的值，并将其全局存储。然后可以添加一次单击函数并引用这些全局值。这是一个更大的代码重写，我只是选择了一个非常简单的解决方案来突出您的问题。

相关文章：