ios下click事件要点击两次才有响应

tongjun741 2014-09-15 05:06:09

为了实现鼠标放上去显示按钮，写了以下代码



<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <script type="text/javascript" src="jquery.1.7.2.js"></script>

</head>

<style>

    .title{width: 300px;height:100px;border: 1px solid #ccc;}

    .close{width: 50px;height:100px;float:right;background-color: green;display: none;}

    .title.msover .close{display: block;}

</style>

<body>

<div class="title">

    <div class="close">

    </div>

</div>

<script>

    $(document).ready(function(){

        $(".title").click(function(){

            alert("ok");

        }).mouseenter(function(e){

            $(this).addClass("msover");

        }).mouseleave(function(e){

            $(this).removeClass("msover");

        });

    });

</script>

</body>

</html>

可是在ipad下就不正常了，要点击两次才出弹出alert。
换成以下的写法就没问题了：



<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <script type="text/javascript" src="jquery.1.7.2.js"></script>

</head>

<style>

    .title{width: 300px;height:100px;border: 1px solid #ccc;}

    .close{width: 50px;height:100px;float:right;background-color: green;display: none;}

    .title.msover .close{display: block;}

</style>

<body>

<div class="title">

    <div class="close">

    </div>

</div>

<script>

    $(document).ready(function(){

        $(".title").click(function(){

            alert("ok");

        }).mouseenter(function(e){

            $(this).addClass("msover");

        }).mouseleave(function(e){

            $(this).removeClass("msover");

        });

    });

</script>

</body>

</html>

谁知道是怎么回事？

...全文

1657 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

wz_307 2014-09-15

打赏
举报

因为第一种写法的时候 title内是的.close为display:none 第一次点并未触发click, 只触发了over, .close变成了block, 再点就有效了 LZ可以试试以第一种写法, 把title设置一个背景颜色, 再看看区别

tongjun741 2014-09-15

打赏
举报

不好意思，贴错了，第二种写法是

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script type="text/javascript" src="jquery.1.7.2.js"></script>
</head>
<style>
    .title{width: 300px;height:100px;border: 1px solid #ccc;}
    .close{width: 50px;height:100px;float:right;}
    .title.msover .close{background-color: green;}
</style>
<body>
<div class="title">
    <div class="close">
    </div>
</div>
<script>
    $(document).ready(function(){
        $(".title").click(function(){
            alert("ok");
        }).mouseenter(function(e){
            $(this).addClass("msover");
        }).mouseleave(function(e){
            $(this).removeClass("msover");
        });
    });
</script>
</body>
</html>