javascript - 第二次点击打开超链接的最佳方法

Question

我的网站上有图片 block ，需要更好的描述。

在移动设备上，我希望在第二次点击实际导航到该链接并打开新页面之前，单击其中一个磁贴以显示更多文本(描述该部分的内容)。

同时，在桌面上，我希望在单击导航到该部分之前将鼠标悬停以显示隐藏的文本。

我原以为我可以简单地使用悬停 - 之前读过，在基于触摸的设备上单击一次会模仿悬停，然后第二次单击会打开链接。但是，这对我来说似乎不是这种情况 - 如果我使用悬停，例如:

<a class="tileLink" href="/projects/london-serviced-apartments">
    <section class="tile">    
        <img src="/images/lsa-s.jpg" srcset="/images/lsa-m.jpg 600w, /images/lsa-l.jpg 1000w, /images/lsa-xl.jpg 1920w" alt="services" />
        <h1>London Serviced Apartments</h1>
        <p class="hidden">Test hover text</p>
    </section>  
</a>

.tileLink:hover .tile{
    opacity: 0.75;
}

.tileLink:hover p{
    display: inline;
}

当我在其中一个图 block 上点击一次时，隐藏的文本会短暂显示，但链接会立即导航到 - 因此用户在有机会阅读文本并决定是否需要之前会被直接带到该部分是否打开链接。

我确实尝试过使用 Javascript 执行此操作:

$(".tileLink").click(function(e){
        if( $(this).find(".tile").hasClass("tapped") ){

        }else{
            e.preventDefault();
            $(this).find(".tile").addClass("tapped").find("p").removeClass("hidden");
        }
});

这实际上适用于移动设备，但在桌面上悬停不起作用 - 需要单击才能显示隐藏文本，并且需要第二次单击才能导航到该部分。

是否有一种适用于多种设备的简单方法？

Answer 1

也许你可以试试pointer-events只允许点击一次 <a> 的父级是专注的。

我假设您的链接可能在列表中(或者其他)。

下面是一个片段来测试这个想法。

*我猜，最好的办法是通过 javascript 来管理它，使其成为防弹*

mediaquerie 仅过滤触摸屏似乎不可靠，小是。

.tileLink:hover .tile,
.tileLink:focus .tile {
  opacity: 0.75;
}

.tileLink:hover p,
.tileLink:focus p {
  display: inline;
}

li {
  float: left;
}

li a {
  pointer-events: none;
}

li:focus a,
li:hover a {
  pointer-events: auto;
}

<h1>test double click to trigger link </h1>
<ul>
  <li tabindex="0">
    <a class="tileLink" href="/projects/london-serviced-apartments">
      <section class="tile">
        <img src="http://dummyimage.com/200" srcset="http://dummyimage.com/300 600w,http://dummyimage.com/400 1000w, http://dummyimage.com/400 1920w" alt="services" />
        <h1>London Serviced Apartments</h1>
        <p class="hidden">Test hover text</p>
      </section>
    </a>
  </li>
</ul>

发挥创意http://codepen.io/anon/pen/yYyKJv http://codepen.io/anon/pen/xwbWRB