Vue.jsでPCからはマウスホバー&クリック、スマホからはクリック(タップ)のみの処理にする方法

Javascript

ボタンを押すと要素が出てくるUIで、PCではhoverとclick。スマホからはタップのみというのを作るのに少し手間取ったのでメモです。

clickとhoverを両方記述

最初はclickとhoverを両方記述してみたのですが、スマホだと挙動がおかしくなりました。

モバイル判定をする

そこで調べたところ、スマホ判定を入れてスマホだったらhover(記述はmouseover/mouseleave)は動かないとすればいいとあったので、その判定を追加したところうまく動きました。

デモページ

実際に実装したデモページはこちら

click・hoverの箇所のHTMLコード

<div id="app">
        <ul class="btnArea">
            <li v-for="(item,index) in items" v-on:click="showList(index)" v-on:mouseover="!isMobile ? showListPc(index) : null" v-on:mouseleave="!isMobile ? hideList(index) : null"><span class="btn01">{{ item }}</span>
                <ul class="selectList" v-if="hoverFlag && index === hoverIndex">
                    <li>隠れているコンテンツ</li>
                </ul>
            </li>
        </ul>
    </div>

JS部分のコード

var app = new Vue({
            el: '#app',
            data: {
                items: ["ボタン1","ボタン2","ボタン3","ボタン4"],
                hoverFlag: false,
                hoverIndex: null,
                isMobile: false
            },
            mounted: function () {
                if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {              this.isMobile = true;          } else if (navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
                    this.isMobile = true;
                } else {
                    this.isMobile = false;
                }
            },
            methods: {
                showList(index){
                    if(this.hoverFlag === true && this.hoverIndex === index){
                        this.hoverFlag = false;
                        this.hoverIndex = null;
                        return;
                    }else {
                        this.hoverFlag = true;
                        this.hoverIndex = index;
                        return;
                    }
                },
                showListPc(index){
                    this.hoverFlag = true;
                    this.hoverIndex = index;
                },
                hideList(){
                    this.hoverFlag = false;
                }
            }
        })

コメント

タイトルとURLをコピーしました