Question

我开发了一个快速响应的网站，但我发现了一些问题。

我有一个带有图像的Div和一些信息。当用户悬停此div时，它会更改背景并显示3个按钮。

但问题是：如果我使用手机并点击按钮位置上的div（甚至在它出现之前），它就会调用＆＃34; OnClick＆＃34;按钮的功能。

我想使用某些功能在这些按钮出现后才能点击这些按钮。

这是我控制悬停的JQuery函数（我已经使用＆＃34;这个＆＃34;因为div在列表中重复）

        $(this).find(".imovel", this).hover(function(){ 
                $("a.contatos", this).toggle();
                $("a.vermais", this).toggle();
                $(".local", this).toggle();
                $(".valor", this).toggle();                        
        });

所以，我真的很感激任何帮助。

Here is the div before click Here the div after click

如果我首先点击手机的位置，它会在悬停之前调用点击功能，并且按钮出现，其他按钮也会出现相同的情况。

谢谢！

正如您所说，我的代码的某些部分（我没有创建此文件，我的工作是实现一些更改，但其中一个需要处理此移动设备上的点击）

<script type="text/javascript">
    $(document).ready(function () { 
        $(".youtube").colorbox({iframe: true, width: "80%", height: "80%"});


        $('.slider_principal').slick({
            dots: true,
            infinite: true,
            speed: 500,
            fade: true,
            cssEase: 'linear',
            arrows: false,
            centerMode: true
        });
        $('.ham_menu').click(function () {
            $("#menugeral").toggle();
        });
        // --------
        $(".abrir_ligamos").click(function (e) {
            $(".overlaygeral").show();
            $(".modal_ligamos").show();
        });

        $(this).find(".imovel", this).hover(function(){ 
                $("a.contatos", this).toggle();
                $("a.vermais", this).toggle();
                $(".local", this).toggle();
                $(".valor", this).toggle();                        
        });

        $(".propostabt").click(function () {
                $(".overlaygeral").show();
                $(".modal_proposta").show();
                $("html, body").animate({ scrollTop: 0 }, "slow");
        });

        $(".overlaygeral").click(function () {
            $(this).hide();
            $(".modal_ligamos").hide();
            $(".modal_proposta").hide();
        });

        $(".fechar").click(function () {
            $(".overlaygeral").hide();
            $(".modal_ligamos").hide();
            $(".modal_proposta").hide();
        });
        var sliders = {
            1: {slider: '#slider_imovel', nav: '#slider_imovel_nav'},

        };

        $.each(sliders, function () {

            $(this.slider).slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                fade: true,
                dots: false,
                asNavFor: this.nav
            });
            $(this.nav).slick({
                slidesToShow: 5,
                slidesToScroll: 1,
                asNavFor: this.slider,
                prevArrow: $('.prev'),
                nextArrow: $('.next'),
                centerMode: false,
                focusOnSelect: true,
                dots: false,
                infinite: true
            });

        });
    });
</script>

 <li class="item">
        <section class="imovel" onclick="">
            <figure>
                <div class="imagemProduto" style="background:url('<?= PATH ?>imagens/large/<?= $des_1->arquivo ?>');"></div>
                <section class="imask"></section>

                <section class="selos">
                    <?php
                    if ($des_1->situacao == "e")
                        echo '<p class="mudar">pronto para mudar</p>';
                    ?>
                    <?php
                    if ($des_1->lancamento == "s")
                        echo '<p class="f360">Lançamento</p>';
                    ?>
                    <?php
                    if ($des_1->url_videos != NULL)
                        echo '<p class="video">Vídeo</p>';
                    ?>

                </section>

                <?php
                $banana = true;
                foreach ($favoritos as $favorito) {
                    if ($favorito == $des_1->id) {
                        ?>
                        <a ><button id="<?=$des_1->id?>" name="1" class="ifavoriteRED"></button></a>
                        <?php
                        $banana = false;
                    }
                }
                if ($banana) {
                    ?>
                    <a ><button id="<?=$des_1->id?>" name="2" class="ifavorite"></button></a>
                    <?php
                }
                ?>




                <section class="informa">

                    <p class="local">

                        <span><?= $arr_cidade[$des_1->cidade] ?></span>
                        <span><?= $bairro[$des_1->bairro] ?></span>
                    </p>    

                    <p class="valor">                           
                        <span>a partir de </span>
                        <strong><?= number_format( $des_1->valor , 2, ',', '.'); ?></strong>                        
                    </p>

                    <a class="contatos abrir_ligamos" id="ligamos">
                        <img src="public/images/ligamos.png">
                        <p>ligamos para você</p>
                    </a>

                    <a class="contatos" id="maximizeChat" title="Maximizar" onClick="Tawk_API.maximize();">
                        <img src="public/images/central.png">
                        <p>plantão de vendas</p>
                    </a>

                    <?php
                    $string = utf8_encode($des_1->titulo);
                    $tring = strtolower(strip_tags(preg_replace(array('/[`^~\'"]/', '/([\s]{1,})/', '/[-]{2,}/'), array(null, '-', '-'), iconv('UTF-8', 'ASCII//TRANSLIT', $string))));
                    ?>

                    <a class="vermais" href="<?= PATH ?>imovel/<?= $des_1->id ?>/<?= $tring ?>">VER MAIS DETALHES</a>
                </section>

            </figure>

            <h1><?= ($des_1->titulo) ?></h1>

            <h2><?= $categoria[($des_1->categoria)] ?>  / <?= ($des_1->quarto) ?> Quarto(s) / <?= ($des_1->wc) ?> wcs / <?= ($des_1->garagem) ?> vaga(s) / <?= ($des_1->areautil) ?> m² / Cod:<?= ($des_1->id) ?> </h2>

        </section>
    </li>

Answer 1

首先，提供一些示例HTML或JavaScript代码会更有帮助。现在我只能猜出问题可能是什么。

我最好的猜测是，问题与移动浏览器中鼠标操作的处理方式有关。

由于手机中没有鼠标，但浏览器假装它有一个。当用户点击时，移动浏览器会将模拟鼠标指针移动到您点击的位置。

在移动浏览器上，此鼠标移动动作是即时的。

按以下顺序触发事件：

hover事件 - 导致您的按钮取消隐藏;这使您的按钮可以点击
click event - 因为按钮现在可以点击;并触发按钮单击处理程序。

所有这些都按顺序同时完成，从而导致您正在观察的问题。

这是一个jsFiddle，你可以测试这种行为：

https://jsfiddle.net/pw7u039h/

注意：桌面浏览器的响应模式可能会以不同方式实现此行为。

我使用上面提供的jsFiddle在Windows Phone 8，Internet Explorer中复制了这个问题。

Chrome的响应式设计模式无法重现此问题。版本56.0.2924.87（64位）。

<强>更新

我在这个jsFiddle中有一个临时解决方案： https://jsfiddle.net/f1b5e2by/5/

这个想法：

当用户“悬停”在移动设备中的元素上时，JavaScript会设置一个变量，告诉点击处理程序忽略以下点击。并在设定的时间后清除无知（在我的例子中为0.2秒）

这将有效防止点击处理程序执行完成后悬停取消隐藏这些元素并触发点击事件。

缺点

难以维护（例如，添加更多在悬停事件后取消隐藏的元素）
取决于用户设备的性能。（例如，JavaScript可能执行缓慢，并且在设定的时间后不会清除点击无知;在慢速移动电话上）。

我建议您使用切换按钮隐藏和取消隐藏元素。

关于在触摸屏设备上处理:hover事件的阅读，这是一个很好的article

<强>更新

我更新了我的第一个jsFiddle并尝试解决问题。但是，我发现了我的解决方案的行为：https://jsfiddle.net/pw7u039h/6/ 移动浏览器和响应式设计模式之间存在差异。

因此，我建议使用切换按钮。它具有相同的控制权，就像您使用“onHover”向移动用户显示信息一样。

Answer 2

使用

JQuery.click();

而不是onclick

：悬停在移动设备上（响应式网页设计）

2 个答案: