触摸事件上的 jQuery event.preventDefault() 不会取消链接

Question

所以我得到了一个网站，其项目索引页面由方形缩略图组成。

在桌面版本上，当您将鼠标悬停在一个项目方形缩略图上时，它会显示一个封面，其中包含有关该项目的一些文本信息。当您单击该封面时，您将进入项目页面。

在移动/触摸版本上，我必须对其进行调整，否则当您点击方形拇指时，您没有时间看到封面(显示不到一秒钟)，它会直接进入项目页面。

这里是投资组合索引中项目方形缩略图的 HTML 代码:

<div id="portfolio">
    ... 
    <a href="/projects/project-page" class="thumbnail">
        <img src="/assets/thumbnail-project-name.jpg" alt="Project info"/>
        <div class="text">
            <span class="slogan">Project tagline</span>
        </div>
    </a>
    ... 
</div>

这是我的 jQuery 尝试， try catch 触摸事件并在...之后执行特殊操作
但由于某种原因 event.preventDefault() 不起作用，我的链接仍然在触摸时继续触发。

$(function onDOMLoaded() {

    var $portfolio = $("#portfolio");

    // TOUCH EVENTS special
    $portfolio.on("touch", ".thumbnail", function(e) {

        e.preventDefault();

        // show thumbnail cover and fire the link on second touch only
        // ...

    });

}); // onDOMLoaded

在iPad2/iOS7和iPhone5/iOS7上进行的测试jQuery V1.10.2

我苦苦挣扎了好几天，但自己或在堆栈中都找不到解决方案。

Answer 1

无论如何，浏览器都会触发 click 事件，因此您需要将逻辑放入 click 事件中。