web - 在桌面上如何禁用与电话号码的链接？

Question

当我在不支持触摸的网站上浏览时，如何将电话号码添加到可点击但隐藏链接的网站。

我可以使用 Modernizr 来设置它。我不知道怎么做。

<a href="tel:1300723579"><p><img src="assets/images/bt_calltoaction.gif" alt="View Projects" width="306" height="60"></p></a>

Answer 1

对我来说，没有任何新类/设置的最简单但最简单的方法是通过 css:

a{
    color: #3399ff;
}

a[href^="tel"]:link,
a[href^="tel"]:visited, 
a[href^="tel"]:hover {
    text-decoration: none;
    color: #000;

    pointer-events: none;
    cursor: default;
}

/* Adjust px here (1024px for tablets maybe) */
@media only screen and (max-device-width: 480px) { 
    a[href^="tel"]:link,
    a[href^="tel"]:visited,
    a[href^="tel"]:hover {
        text-decoration: underline;
        color: #3399ff;

        pointer-events: auto;
        cursor: pointer;
    }
}

Html 就像这样:

<a href="tel:+123-456-7">(+12)3 456 7</a>

这适用于现代浏览器和 IE 11+。如果您需要包含 8 < IE < 11，请将以下内容添加到您的 javascript 中，因为指针事件在 IE 中不起作用:

var msie = window.navigator.userAgent.indexOf("MSIE ");

if (msie > 0){
    var Elems = [], Tags = document.querySelectorAll("a[href^='tel']");

    //Nodelist to array, so we're able to manipulate the elements
    for (var i = 0; i < Tags.length; i++ ) {
        Elems[ i ] = Tags[ i ];
    }

    for(var i = 0; i < Elems.length; i++){
        Elems[ i ].removeAttribute('href');
    }
}

编辑:我在另一个线程上找到了另一个答案，这可能对你有用 - SO - Answer