Question

我有一个我正在处理的简单代码

今天我发现了一些奇异的东西。

相同的代码

<a href="tel:+393481234567">348-1234567</a>

在该页面中粘贴了三次 - 它被粘贴在一个可见的div中，在那里工作并点击链接，呼叫开始，

它被粘贴到导航菜单中，导航菜单实际上是一个叠加DIV，稍后jquery函数将取消隐藏。那个叠加层，相同的链接不会“呼叫”。

你对此有任何疑问吗？

要检查它的实际效果，请使用智能手机查看此测试页 http://hc.no-ip.biz/nav/tel-doesnt-work.html

这个数字可以在顶部橙色栏下面的loremipsum文本中找到，它可以（调用发生），而如果你点击汉堡按钮取消隐藏导航菜单，你会再次发现同一个电话链接两次，或者作为li项目作为导航菜单最底部的链接。

如果您检查该网页来源，您会看到该链接已被复制并粘贴，没有任何差异。

编辑01：正如弗洛里安所说，我改变了结构使用菜单按钮向div添加了id =“hamburger” 将javascript更改为

$('#hamburger').on('click',function(){

但行为相同： - （

编辑02：解决了，谢谢Florianb的有趣链接。当叠加层被隐藏时，另外两个“点击”事件（它们是可选的）正在拦截点击事件。我删除了它们，现在它正常工作。

编辑03：为方便大家，在这里你找到问题的页面代码，在底部包含两个事件的代码，删除。

    <header class="fissotop">
    <div id="responsive-logos">
        <div id="responsive-logo1" class="logo"><a href="#">
        <img class="btn-open" src="recupero-euro-logo.png" alt="">
        <img class="btn-close" src="recupero-euro-logo.png" alt=""></a></div>
        <div id="responsive-logo2" class="logo"><a href="#">
        <img class="btn-open" src="recupero-euro-logo-32.png" alt="">
        <img class="btn-close" src="recupero-euro-logo-32.png" alt=""></a></div>
    </div>
    <div id="navigation-brief">
        <nav>
            <ul>
                <li><a href="#">RecuperoEuro</a></li>
                <li><a href="#">Chiavette</a></li>
                <li><a href="#">Schede</a></li>
                <li><a href="#">SSD</a></li>
                <li><a href="#">Contatti</a></li>
            </ul>
            <div class="button" id="hamburger">
            <img class="btn-open" src="hamburger-button-32-w.png" alt="">
            <img class="btn-close" src="close-button-32-w.png" alt=""></div>
        </nav>
    </div>
</header>

<div class="navigation-full">
    <div class="wrap">
        <nav>
            <ul class="wrap-nav">
                <li><a href="#">Recupero Euro</a>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Processo</a></li>
                        <li><a href="#">Condizioni</a></li>
                        <li><a href="#">Dove siamo</a></li>
                    </ul>
                </li>
                <li><a href="#">Chiavette</a>
                    <ul>
                        <li><a href="#">Kingston</a></li>
                        <li><a href="#">Sandisk</a></li>
                        <li><a href="#">Verbatim</a></li>
                        <li><a href="#">Transcend</a></li>
                        <li><a href="#">Lexar</a></li>
                        <li><a href="#">Altre</a></li>
                    </ul>
                </li>
                <li><a href="#">SSD e Schede</a>
                    <ul>
                        <li><a href="#">SSD Solid State Drive</a></li>
                        <li><a href="#">Compact Flash CF</a></li>
                        <li><a href="#">SD</a></li>
                        <li><a href="#">MicroSD</a></li>
                        <li><a href="#">Monolitiche</a></li>
                    </ul>
                </li>
                <li><a href="#">Contatti</a>
                    <ul>
                        <li><a href="http://tickets/newticket.php?department=4">Creare un ticket</a></li>
                        <li><a href="tel:+393481234567">348-1234567</a></li>
                        <li>info{at]mail.it</li>
                    </ul>
                </li>
            </ul>
        </nav>
        <div class="social">
            <a href="tel:+393481234567">348-1234567</a> lorem ipsum
face-boken twittagain
        </div>
    </div>
</div>


<div class="marginetop">
<a href="tel:+393481234567">348-1234567</a> Longnose lancetfish, goldfish clingfish Mex
ican golden trout bluntnose minnow; lorem ipsum lorem ipsum
</div>

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<script>
$(document).ready(function(){
    $('.btn-close').fadeOut(200);
    var open = false;
    $('#hamburger').on('click',function(){
     if(open == false){
        $('.navigation-full, .btn-close').fadeIn(200);
        $('#navigation-brief ul li, .btn-open').fadeOut(200);
        open = true;
     } else {
        $('.navigation-full, .btn-close').fadeOut(200)
        $('#navigation-brief ul li, .btn-open').fadeIn(200);
        open = false;
     }
    });
    $('.navigation-full').on('click', function(){
        $('.navigation-full, .btn-close').fadeOut(200);
        $('#navigation-brief ul li, .btn-open').fadeIn(200);
        open = false;
    });
    $('.wrap').on('click', function(){
        return false;
    });
})
 </script>

在弗洛里安的建议之后，我已经删除了javascript中的最后两个选择器，因为他们在感兴趣的区域覆盖了一个太宽的页面问题，正如暗示的那样，他们正在拦截点击动作，所以以下代码已被删除

    $('.navigation-full').on('click', function(){
        $('.navigation-full, .btn-close').fadeOut(200);
        $('#navigation-brief ul li, .btn-open').fadeIn(200);
        open = false;
    });
    $('.wrap').on('click', function(){
        return false;
    });

Answer 1

您在脚本中注册了一个on-click-handler，如下所示：

$('.button a').on('click',function(){...

jQuery采用CSS-selectors作为工具来定义受影响的DOM元素。

让我们看看你选择了什么：

.button a

你的表达有两条规则。

标识符：.button - 标识符与类型按钮的每个类相匹配，a - 标识符与每个元素匹配类型锚。
优先级：通过编写.button a，您可以告诉jQuery匹配.button元素由a - 元素后代的每个DOM结构。

因此，主页上的a - 元素错过了星座，而它没有匹配且没有附加点击处理程序。

您有两种方法可以解决这个问题：

修改页面结构或更改选择器以使其更精确。
自行触发点击事件，如jQuery-Documents for＆＃34; on＆＃34;和＆＃34; trigger＆＃34;

P.s。：这篇非常好的帖子The 30 CSS Selectors you Must Memorize我帮助你熟悉css-selectors。

tel：link在覆盖div（？）中不起作用

1 个答案:

您有两种方法可以解决这个问题：