移动点击事件问题

时间:2015-08-29 00:23:11

标签: javascript mobile tap

我在移动设备上遇到点击事件的问题。

创建3个高度相同的div。点击第二个div以隐藏第一个div,它将触发第三个div上的事件。

示例代码:可在chrome设备模拟器中重现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>phone issue</title>
</head>
<style type="text/css">
    .hide {
    display: none;
}
#one, #two, #three {
    width: 100%;
    height: 150px;
    border: 1px solid #000;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#two').on('tap', function () {
            $('#one').toggle();
        });

        $('#three').on('tap', function () {
            alert('you just clicked me!');
        });
    });
</script>
<body>
<div id="one">hide</div>
<div id="two">main</div>
<div id="three">click</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

尝试使用&#39;点击&#39;事件而不是&#39; tap&#39;事件。我遇到了同样的问题并设法通过使用&#39;点击&#39;来解决问题。事件。有关详细信息,请参阅jquery移动文档:https://api.jquerymobile.com/vclick/。问候。