在 Zepto 中将 onClick 方法转换为 tap 方法

Question

是否有一种简单的方法可以在移动网络应用上重新编写链接，从 onclick 到使用 Zepto 轻敲？目前我想为每个 onclick 实例触发 $.tap 命令。

例如

<a href="#" tap="doSomething(); return false;">Link</a>

这可能吗，还是有办法阻止 onclick 触发，但采用 onclick 方法并在 $.tap 方法中调用它？

对于使用 Zepto 制作快速按钮有什么建议吗？

Answer 1

更优雅的方法是将点击触发器存储在一个变量中，然后在处理触摸屏设备时将该变量从“click”重新映射到“touchstart”。

在这里，我使用一个全局对象变量 myUtils 来存储我的点击事件，它的值默认为“点击”：

var myUtils = myUtils || {};
myUtils.events = myUtils.events || {
  click : "click"
};

如果检测到触摸屏，则将 myUtils.events.click 属性更改为“touchstart”值：

if (typeof document.body.ontouchstart !== "undefined") {
  myUtils.events.click = "touchstart";
}

现在，当我将点击事件绑定到我的元素时，我使用 myUtils.events.click 属性作为事件名称：

$(function() {
   $("#link").bind(myUtils.events.click, function(e) {
     alert("I'm a " + e.type);
     e.preventDefault();
   });
});​

这样我只需要做“它是触摸屏吗？”在我的应用程序中测试一次，之后我将根据需要绑定到“touchstart”或“click”。我不必担心取消移动设备上不需要的点击事件，因为该事件从一开始就没有绑定。

e.preventDefault() 调用将阻止链接被跟踪（假设#link 是一个href 链接）。

JSFiddle 版本：http://jsfiddle.net/BrownieBoy/Vsakw/

请注意，此代码假定触摸屏设备仅是触摸屏设备；即手机或平板电脑。如果您使用的是触摸屏 PC，那么您将无法使用鼠标使用它！

Answer 2

好吧，我理解您的方式是您希望在移动设备和桌面设备上具有不同的行为，但使用相同的代码。如果是这样，那么您需要确定您所在的平台然后定义您的代码

if(MOBILE) {
    $('element').click(function(){
        return false;
    });

    $('element').on('touchstart', function(){
        // functionality of the onclick written here
    });
}
else {
// desktop event listeners
}