*移动悬停(负责网页设计)

Question

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

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

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

我想要使用一些功能，只有在这些按钮出现后才可点击。

这是我控制悬停的JQuery函数(我使用了这个函数，因为div是在列表中重复的)

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

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

以下是单击之前的div 这里是点击后的div。

如果我第一次点击手机的位置，它会在悬停和按钮出现之前调用它的点击功能，其他按钮也会出现同样的情况。

谢谢!

正如您所问，我的代码的某些部分(我没有创建这个文件，我的工作是实现一些更改，但其中之一需要处理这个点击移动)

<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/

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

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

Chrome的响应设计模式无法重新创建此问题。版本56.0.2924.87 (64位)。

更新

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

这个想法是：

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

这将有效地防止单击处理程序在悬停后执行到完成，取消这些元素并触发单击事件。

Cons

• 很难维护(例如，在悬停事件之后添加更多解除隐藏的元素)
• 取决于用户设备的性能。(例如，JavaScript可能执行得很慢，并且在固定时间后不能清除单击无知；在慢速移动电话上)。

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

下面是一个很好的文章，可以在触摸屏设备上阅读处理:hover事件的内容

更新

我更新了我的第一个jsFiddle并试图解决这个问题。然而，我发现我的解决方案的行为：https://jsfiddle.net/pw7u039h/6/不同的移动浏览器和响应设计模式。

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

Answer 2

使用

JQuery.click(); 

而不是onclick