在第二次点击时打开超链接的最佳方法答案

【问题标题】：Best way to make hyperlink open on second tap在第二次点击时打开超链接的最佳方法
【发布时间】：2015-09-04 22:49:33
【问题描述】：

我的网站上有图像块，需要更好的描述。

在移动设备上，我希望在其中一个图块上单击以显示更多文本（描述该部分的内容），然后再点按一下实际导航到该链接并打开新页面。

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

我原以为我可以简单地使用悬停 - 之前阅读过，在基于触摸的设备上单击一次会模仿悬停，然后再单击一次打开链接。但是，这对我来说似乎不是这样 - 如果我使用悬停，E.G：

<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;
}

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

我确实尝试过使用 Javascript：

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

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

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

有没有一种简单的方法可以在多个设备上工作？

【问题讨论】：

您的意思是无论点击行为如何，鼠标悬停时隐藏的
都不会显示在桌面上吗？因为那将是一个不同的问题，您的.tileLink:hover p 可能对您的.hidden 没有权限，您也可以发布吗？

标签： javascript jquery html css

【解决方案1】：

也许您可以尝试 pointer-events 以仅在 <a> 的父级获得焦点时才允许点击。

我假设您的链接可能在列表中（或其他）。

在一个 sn-p 下测试这个想法。

*我想最好是通过 javascript 来管理它以使其防弹 *

媒体查询似乎不可靠，只过滤触摸屏，小是的。

.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

【讨论】：

这对我来说效果最好，我也喜欢它是纯 CSS。以前没有遇到过指针事件。我没有将我的图块放在列表中，因此通过将每个图块包含在其自己的 div 而不是 li 中来稍微即兴发挥。感谢您的帮助。

【解决方案2】：

Heres a codepen 您正在寻找的内容 - 您可以检查设备是否像这样移动

var isMobile = false;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  isMobile = true;
}
if(isMobile) {
  $(".tileLink").on('click', function(e) {
     e.preventDefault();
     var para = $(this).find('p.hidden');
     if(para.hasClass('tapped')) {
       window.location = $(this).attr('href');
     } else {
       $('p.hidden').removeClass('hidden').addClass('tapped');
     }
  });
} else {
  $('.tileLink').on('mouseover', function() {
     $(this).find('p.hidden').removeClass('hidden');
  });
}

【讨论】：