【jQuery】メニューを閉じる時にメニュー裏に重なったリンクが開くを防ぐ

Sat, 06 Aug 2022 23:19:46 +0900

メガメニューを閉じるときのタップで裏側のリンクが開いてしまう

アコーディオンやメガメニューに設定したリンクや閉じるボタンが、コンテンツのリンクと重なっていて、スマホやタブレットでメニューを閉じるときにiPhoneやiPadのSafari上でタップすると、メニューを閉じた後に下のリンクが開いてしまいました。これをどうにか解消するために、良い方法がないかな？と探してみました。

setTimeoutを使って一定時間、マウスポインターを無効にすることで解決できる方法があったのでメモ。

https://dezanari.com/jquery-disable-click-certain-time/ https://dezanari.com/jquery-disable-click-certain-time/

解決できたソース例

上記にあったサンプルでは、スライダーでの利用を想定していますが、私の場合、メガメニューの裏側にあるスライダー（slick-silder）のリンクがボタン裏にあり、それが開いてしまうことを想定しています。「閉じる」ボタンが押されたら、CSSのpointer-events:none;を対象の要素に追加して、スライダーのリンク（aタグ）をクリックできないよう、マウスポインターを2秒間無効にして元に戻すという内容です。

$(function() {
  $('.button').click(function() {
    $('slick-slide a').css('pointer-events', 'none');
    setTimeout(function () {
      ('slick-slide a').css('pointer-events', '');
    }, 2000);
  });
});

これでうまくいきました。待機時間は0.25～0.5秒（250～500」）くらいでも大丈夫でした。

【JS】videoタグ動画の画面クリックでPlay/Pauseできるようにする

Tue, 07 Dec 2021 17:11:05 +0900

画面タッチで再生/停止をしたい

サイトの背景イメージとしてにvideoタグで動画埋め込んだページを制作する機会がありました。背景なので、デザイン的にcontrolsで再生ボタンなどのツールバーは表示させたくありません。それを避けながらPlay/Pauseの機能を付けたいといった要望に応えることになりました。

そこで、方法を調べたらありました。結構、簡単にあっさり実現できました。参考にさせていただいたのは以下のページ。

https://qiita.com/ryo2132/items/bac787725c983d0e3f4b https://qiita.com/ryo2132/items/bac787725c983d0e3f4b

ソース例

HTML

<div class="video-wrap">
        <source src="test.mp4" type="video/mp4" />
        <img src="test-movie.jpg" />
        </video>
        <div class="video-btn" id="video-btn"></div>
</div>

CSS

.video-wrap {
    position: relative;
}
.video-btn {
    content: "";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:40px; /*コントローラー分下部に余白を*/
    cursor: pointer;
    z-index: 2; /*ボタンが前面になるようにする*/
}

Javascript

const video = document.querySelector('#video');
const video_btn = document.querySelector('#video-btn');
let is_playing = false;

video_btn.addEventListener('click', () => {
    if (!is_playing) {
        video.play();
        is_playing = true;
    } else {
        video.pause();
        is_playing = false;
    }      
});

一時停止 on qwerty.work