frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

CSSとJSでtelリンクを無効にする方法

スポンサードリンク


スポンサードリンク


電話番号をかけさせたいときのhtmlは以下のようにします。

html

<p class="tel"><a href="tel:0312345678">03-1234-5678</a></p>

この状態では、PCの時でも不要にリンクが発生してしまうため、レスポンシブデザインではPCでは無効にし、指定の幅以下で無効を解除します。

css

[href^="tel"] {
    text-decoration: none;
    color: #333;
    cursor: default;
    pointer-events: none;
}
@media screen and (max-width: 768px) {
    [href^="tel"] {
        pointer-events: auto;
    }
}

※768pxをブレークポイントとします。

  • pointer-events: noneはdrag、hover、click等のイベントを無効化します。
  • cursor: default;は標準のマウスカーソルを指定します。
  • スマホ幅の時はpointer-events: auto;にしてイベントが起きるように戻します。

pointer-eventsはIEは11からがサポートされています。
Can I use... Support tables for HTML5, CSS3, etc

IE10以降の対応が必要な時は、outline:none;にしてPC幅でクリックした時にフォーカスが当たらないようにする必要があります。

JavaScript

    function setTelDisable(){
        var $tel = $('[href^="tel:"]');
        $tel.attr('tabIndex', -1);
        $tel.on('click', function(e){
            if($(window).width() > 768){
                e.preventDefault();
            }
        });
    }
    setTelDisable();

タブでフォーカスすることを防ぐためにtabIndexに-1を指定しています。
スマホ幅以上の時は、preventDefault()でイベントを無効にしています。

参考になれば幸いです。

DEMO

See the Pen eEQYmX by funclur (@funclur) on CodePen.