javascript - 强制移动设备激活 :hover CSS properties on first touch and activate link on second touch

Question

: )

所以，我正在尝试解决悬停效果问题。我的一些链接有工具提示。代码如下所示:

<a href="https://wikipedia.org/wiki/Space_Shuttle_Atlantis">
  <h6 class="has-tip">Space Shuttle
    <p class="tip">The space shuttle was invented by Santa Claus</p>
  </h6>
</a>

CSS 涉及的更多一些:

.tip {
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  pointer-events: none;
  padding: 20px;
  margin-bottom: 15px;
  color: #fff;
  opacity: 0;
  background: rgba(255,255,255,.8);
  color: coal;
  font-family: 'Ubuntu Light';
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  text-shadow: none;
  border-radius: .2em;
  transform: translateY(10px);
  transition: all .25s ease-out;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

.tip::before {
  content: " ";
  display: block;
  position: absolute;
  bottom: -20px;
  left: 0;
  height: 20px;
  width: 100%;
}

.tip::after { /* the lil triangle */
  content: " ";
  position: absolute;
  bottom: -10px;
  left: 50%;
  height: 0;
  width: 0;
  margin-left: -13px;
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(255,255,255,.8) 10px;
}

.has-tip:hover .tip {
  opacity 1;
  pointer-events auto;
  transform translateY(0px);
}

现在，这在桌面上运行得非常好。你将鼠标悬停在小标题上，你会得到一个漂亮的工具提示，然后如果你单击标题或工具提示上的任意位置(除非你决定在段落中放置另一个链接，该链接可以单独且很好地工作)你激活链接。耶:)

现在在移动设备上，整个事情变得很时髦。触摸只会激活链接。如果您的网速或 iOS 速度较慢，您可能会在下一页加载时瞥见工具提示。

我想要以下行为:

1. 用户点击带有类 (has-tip) 的小标题 (h6)
2. 如果这是第一次点击，则会显示工具提示，并且不会发生其他任何事情。 3)
3. 如果工具提示在他们点击时已经显示(如在后续点击)然后链接被激活并加载新页面。

有什么想法可以实现吗？尽可能不要使用 jQuery。

Answer 1

一种方法是保存对上次单击的 has-tip 链接的引用，并对其应用一个类以强制显示提示。当您点击一个链接并且它与上次点击的链接匹配时，您就让该事件通过。

编辑:哦，我忘了说你可能需要一个用于旧 IE 的 classList shim。

JSFiddle link.

HTML

<a href="http://jsfiddle.net/1tc52muq/5/" class="has-tip">
  JSFiddle<span class="tip">Click for some fun recursion</span>
</a><br />
<a href="http://google.com" class="has-tip">
  Google<span class="tip">Click to look for answers</span>
</a>

JS

lastTip = null;

if(mobile) {
    var withtip = document.querySelectorAll(".has-tip");

    for(var i=0; i<withtip.length; ++i) {
        withtip[i].addEventListener("click", function(e) {
            if(lastTip != e.target) {
                e.preventDefault();
                if(lastTip) lastTip.classList.remove("force-tip");
                lastTip = e.target;
                lastTip.classList.add("force-tip");
            }
        });
    }
}

CSS

.has-tip {
    position: abolute;
}
.tip {
    display: none;
    position: relative;
    left: 20px;
    background: black;
    color: white;
}

.has-tip:hover .tip, .force-tip .tip {
    display: inline-block;
}