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

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

例如

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

这可能吗，或者有没有办法防止 onclick 触发，但采用 onclick 方法并在 $.tap 方法内调用它？

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

最佳答案

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

这里，我使用全局对象变量 myUtils 来存储我的点击事件，默认值为“click”:

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

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

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

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

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

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

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

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

关于javascript - 在 Zepto 中将 onClick 方法转换为 tap 方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10504314/