javascript - :hover on mobile (responive web design)

Question

我正在开发一个响应式网站，但我发现了一些问题。

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

但问题是:如果我使用手机并点击按钮位置上的 div(甚至在它出现之前)，它会调用按钮的“OnClick”函数。

我想使用一些函数将这些按钮设置为只有在它们出现后才可以点击。

这是我控制悬停的 JQuery 函数(我使用“this”因为 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 事件 - 因为按钮现在是可点击的；并触发按钮点击处理程序。

所有这些都是按顺序同时完成的，因此导致了您所观察到的问题。

这是一个 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 可能执行缓慢，并且在设定的时间后不会清除点击忽略；在慢速手机上)。

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

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

更新

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

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