javascript - 在 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
}