Question

：）

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

panStop

CSS更复杂：

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

现在，在桌面上这非常有效。你将鼠标悬停在小标题上，然后你会得到一个漂亮的工具提示，然后如果你点击标题或工具提示上的任何地方（除非你决定将另一个链接放在段落中并且很好地工作），你就可以激活链接。耶：）

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

我想要以下行为：

用户点击具有类（has-tip）
如果这是第一次点击，工具提示会显示，而不会发生任何其他情况。 3）
如果工具提示在点击时已经显示（如后续版本中所示）点击）然后激活链接并加载新页面。

我有什么想法可以实现这个？如果可能的话，没有jQuery。

Answer 1

编辑：只是想说Jacques的方法类似，但更优雅。

在触控设备上，您需要点击/点击计数器：

1）首次点击任何链接，存储链接并显示悬停状态。

2）在另一个水龙头上，检查它是否与第一个相同，然后执行正常的点击操作（如果是）。否则，清除所有现有的悬停，并将新的点击目标设置为要计数的目标。

3）如果点击非链接，请重置/清除任何悬停。

我做了一个基本的JSFiddle，console.logs这些动作。由于我们没有使用jQuery，因此我没有在元素上添加/删除CSS类。

另外，很抱歉没有点击点按而不是点击。

var clickTarget;

var touchDevice = true;

if(touchDevice) {
    var links = document.getElementsByTagName('a');
    for(var i=0; i<links.length; i++) {
      links[i].onclick = function(event) {
        event.stopPropagation();
        event.preventDefault();  // this is key to ignore the first tap
        checkClick(event);
      };
    };

    document.onclick = function() {
      clearClicks();
    };
}


var checkClick = function(event) {
    if(clickTarget === event.target) {
      // since we're prevent default, we need to manually trigger an action here.
      console.log("Show click state and also perform normal click action.");
      clearClicks();
    } else {
      console.log("New link clicked / Show hover");
      clickTarget = event.target;
    }
}

var clearClicks = function() {
  console.log("Clearing clicks");
  clickTarget = undefined;
};

http://jsfiddle.net/doydLt6v/1/

Answer 2

执行此操作的一种方法是保存对最后点击的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;
}

强制移动设备激活：首次触摸时悬停CSS属性并在第二次触摸时激活链接

2 个答案: