jQuery移动（click事件）

Question

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

我试图使用 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");
    }

});
});

- guillaume coulbaux

Answer 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

更多信息请参阅http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html

- Derry White

---

是的，它是触摸开始添加，使用e.preventdefault可以获得完美的结果。 - guillaume coulbaux

使用touchstart时要小心。当用户试图滑动滚动条时，它可能会被意外触发。我建议至少使用touchend。理想情况下，您应该在touchstart上更新UI，并仅在touchend上执行操作。我创建了一个插件jquery-touchclick，可以实现这一点。 - tuxracer

Answer 2

我建议使用on()而不是bind() 另外，既然你正在这样做：

var btnMenuDyn = $('a.btnMenuDyn')

btnMenuDyn 是一个 jQuery DOM 元素，所以需要更改为：

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

转换为这个

if (menuDyn.hasClass("menuDynHide"))

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

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

- Johan

---

我不同意使用$前缀来声明jquery dom元素，主要是因为php遗留下来的$的用法，而jquery则是最近才出现的。 - dsdsdsdsd

使用on而不是bind（请参见此处的原因http://api.jquery.com/bind/）+1 以$前缀命名变量-1，因此结果是中性的 :) - victorvartan

当然，这归结于个人喜好。如果你不喜欢它，就不要使用它。 - Johan

是的，我想你说得对，这确实是一个风格问题。也许因为我更多地使用类型安全的语言，所以我看不出使用匈牙利命名法的好处。我想我的评论后半部分过于客观了，那就只能加一分了 :) - victorvartan

@victorvartan 这其实是我在 JavaScript 中唯一觉得有必要指定数据类型的时候。当涉及到比较变量时，我会坚持使用 ===，因为它相当于强类型语言中的 ==。 - Johan