在 Zepto 中将点击方法转换为点击方法

Converting onClick methods over to tap methods in Zepto

本文关键字：方法 转换 Zepto      更新时间：2023-09-26

有没有一个简单的在移动网络应用程序上使用Zepto从点击到点击重写链接？目前，我想为每个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";
}

现在，当我将单击事件绑定到我的元素时，我使用我的 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，那么您将无法将其与鼠标一起使用！

好的，

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

if(MOBILE) {
    $('element').click(function(){
        return false;
    });
    $('element').on('touchstart', function(){
        // functionality of the onclick written here
    });
}
else {
// desktop event listeners
}
相关文章：