Question

我目前有一个div，里面有一些信息。请参阅以下示例：

<div class="verstuurd" onclick="alert('clicked!');">
    <div class="titel"><span>Title</span><img src="imageurl"/></div>
    <div class="image"><img src="imageurl"/></div>
    <div class="tekst"><p>some text</p></div>
    <div class="hover">
        VISIBLE TEXT
    </div>
    <div class="delen">
        VISIBLE AFTER HOVER
    </div>
</div>
</div>

:hover功能完美运行，显示“delen”部分，隐藏“悬停”部分。我只在移动设备上遇到问题。如果我在移动设备上向下滚动页面并触摸div，则会触发悬停。

我正在寻找的答案是;我如何在PC上使用:hover以及在移动设备上使用某种点击事件？所以我必须单击才能更改内容，第二次单击将触发div的onclick。

作为我灵感的一个例子，请参阅website。

如果你悬停一个项目，它将显示心脏图标。 PC使用它与悬停和移动需要点击显示。不幸的是我找不到触发它的源代码。

Answer 1

你在谈论，你想要触摸div时触发onClick =“theFunctionNameToBeCalled（）”（特别是在移动设备上？）

如果你想要，你可以使用

$( "#divIdToBeTouced" ).click(function() {
  //do something with a function here
});

或者你可以使用普通的'JavaScript来完成任务。

<!DOCTYPE html>
<html>
<head>
<title>Coty's Title</title>
</head>
<body>

<div id="divIdToBeTouched" onmouseover="theFunctionToBeCalled()" onClick="theFunctionToBeCalled()">
I'm a div
</div>

<script>
var i = 0;
function theFunctionToBeCalled(){
  i++;
  if(i == 2) {
    //do what you wanted once the onClick event was fired
    alert("i == 2");
    //now make sure to reset the flag that was made so it will work     next time
    i = 0;
  }
  else {
    //change the content
    alert("i == 1");
  }
    //do something interesting here if you want to
}

</script>
</body>
</html>

将此代码粘贴到此页http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default上？你可以在浏览器计算机上试用它并在移动设备上尝试它应该工作我测试了它

现在让悬停事件也调用此函数，它将覆盖两个evens

额外信息：

我听说有两条可能的路径可以从这里开始，有些人说一种方式是“危险的”，我会列出下面的两侧如果你想知道......

续

另一个参数是需要添加一个事件监听器而不是直接函数调用这似乎更安全。我认为因为它可以帮助隐藏函数调用它自己..？我不确定。

希望这有帮助

CSS：将鼠标悬停在移动设备上作为点击

1 个答案:

我听说有两条可能的路径可以从这里开始，有些人说一种方式是“危险的”，我会列出下面的两侧如果你想知道......