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尝试捕捉触摸事件并在...之后做特殊的事情但由于某些原因，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事件中。

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

1 个答案: