jQuery 移动（点击事件）答案

【问题标题】：jQuery mobile (click event)jQuery 移动（点击事件）
【发布时间】：2012-07-05 03:52:06
【问题描述】：

我正在开发智能手机混合应用程序。

我正在尝试用slideDown/slideUp 隐藏/显示<div>。

当我单击按钮时，菜单 <div> 应该根据上下文隐藏/显示。在我的电脑上一切正常，但在我的手机上却完全不工作，什么也没有发生。

这是我的 HTML 代码

<a class="btnMenuDyn" data-role="button">Masquer le menu</a>

这里是我的 jQuery 移动代码：

$(document).bind('pageinit', function(e){


// définition des variables
var btnMenuDyn = $('a.btnMenuDyn'),
    menuDyn = $('div.menuDyn');

$(btnMenuDyn).bind('click', function(){


    // condition pour afficher ou non le menu
    if ($(menuDyn).hasClass("menuDynHide"))
    {
        $(menuDyn).slideDown().removeClass("menuDynHide");
    }
    else{
        $(menuDyn).slideUp().addClass("menuDynHide");
    }

});
});

【问题讨论】：

标签： jquery events mobile button click

【解决方案1】：

这个问题是手机不支持点击他们使用 touchstart 和 touchend 所以可以跟踪移动如果你仍然想在电脑上测试你可以这样做

$(btnMenuDyn).bind('touchstart mousedown', function(event){
    event.preventDefault();
    if ($(menuDyn).hasClass("menuDynHide"))
    {
        $(menuDyn).slideDown().removeClass("menuDynHide");
    }
    else{
        $(menuDyn).slideUp().addClass("menuDynHide");
    }

});

另一个相同答案的问题jquery touchstart in browser

【讨论】：

是的，添加的是 touchstart，e.preventdefault 可以获得完美的结果。谢谢。
小心使用 touchstart。当用户尝试滑动滚动时，可能会无意触发。我建议至少使用 touchend。理想情况下，您会在 touchstart 上更新 UI，并且只在 touchend 上操作。我创建了一个插件可以做到这一点jquery-touchclick

【解决方案2】：

我建议使用on() 而不是bind()

既然你这样做了：

var btnMenuDyn = $('a.btnMenuDyn')

btnMenuDyn 是一个 jquery dom 元素，所以改变这个：

if ($(menuDyn).hasClass("menuDynHide"))

到这里

if (menuDyn.hasClass("menuDynHide"))

最好像这样声明 jquery dom 元素：

var $btnMenuDyn = $('a.btnMenuDyn')

【讨论】：

我不同意使用 $ 前缀声明 jquery dom 元素，即因为 php 对 $ 的旧用法，而 jquery 最近才出现。
+1 用于使用 on 而不是 bind（请参阅此处为什么 api.jquery.com/bind）-1 用于使用 $ 前缀命名变量所以结果是中性的 :)
@victorvartan stackoverflow.com/questions/205853/… 当然，这取决于个人喜好。如果您不喜欢它，请不要使用它。
是的，我想你是对的，这是风格问题。也许是因为我更多地使用类型安全语言，我认为没有充分的理由使用匈牙利符号。我想我评论的后半部分太客观了，所以留下 +1 :)
@victorvartan 实际上这是我唯一一次发现有必要在 Javascript 中指明数据类型。在比较变量时，我坚持使用 JS 中的 ===，因为它与强类型语言中的 == 等效。