Question

是否可以通过onclick在移动网络应用上轻松重写链接以使用Zepto进行点击？目前我想为每个onclick实例启动$ .tap命令。

例如

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

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

使用Zepto制作快速按钮的任何建议？

Answer 1

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

在这里，我使用全局对象变量myUtils来存储我的click事件，默认为“click”作为其值：

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

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

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

现在，当我将click事件绑定到我的元素时，我使用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/

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

Answer 2

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

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

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

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

2 个答案: