1

私のウェブサイトはレスポンシブで、狭いビューの場合、ナビゲーションはクリック時にナビゲーションを表示するアイコンに切り替わります. ナビゲーション パネルを閉じるには、アイコンをもう一度クリックするか、ナビゲーション モーダル以外の場所をクリックします。これは、ナビゲーション モーダルの外側でクリックを管理するための JS です。

$(document).mousedown(function(e) {
    var clicked = $(e.target);
    if (clicked.is("#navigation") || clicked.parents().is("#navigation") || clicked.is("#hamburger-nav-link")) {
        return;
    } else {
        $("#hamburger-nav-link").removeClass("hamburger-nav-active");
        $("#navigation").removeClass("mobile-nav");
    }
});

モバイル デバイス (私の iPhone) では、アイコンをタップするとナビゲーション モーダルが閉じますが、ナビゲーション モーダルの外側をタップしても何も起こりません。

この SO の質問からコードを実装して、タッチ イベントをクリック イベントにマップしようとしました: タッチ イベントをマウス イベントにマッピングする JavaScript

しかし、これは私にはうまくいきませんでした。

関数の下にコードを貼り付けましたが$(document).mousedown()、それはすべて一般的な jQuery 関数内にあります。全体を確認できるように、以下にコードを貼り付けました。このファイルは、各ページの最後で終了タグの前に呼び出されます。

どんな助けでも大歓迎です、ありがとう！

$(関数() {

// Mobile nav
$("#hamburger-nav-link").click(function() {
    if ($("#navigation").hasClass("mobile-nav")) {
        $(this).removeClass("hamburger-nav-active");
        $("#navigation").removeClass("mobile-nav");
    }
    else {
        $(this).addClass("hamburger-nav-active");
        $("#navigation").addClass("mobile-nav");
    }

    return false;
});

// Close modal if click event is outside of it
$(document).mousedown(function(e) {
    var clicked = $(e.target);
    if (clicked.is("#navigation") || clicked.parents().is("#navigation") || clicked.is("#hamburger-nav-link")) {
        return;
    } else {
        $("#hamburger-nav-link").removeClass("hamburger-nav-active");
        $("#navigation").removeClass("mobile-nav");
    }
});

function touchHandler(event)
{
        var touches = event.changedTouches,
                first = touches[0],
                type = "";
                 switch(event.type)
        {
                case "touchstart": type = "mousedown"; break;
                case "touchmove":    type="mousemove"; break;                
                case "touchend":     type="mouseup"; break;
                default: return;
        }

                         //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
        //                     screenX, screenY, clientX, clientY, ctrlKey, 
        //                     altKey, shiftKey, metaKey, button, relatedTarget);

        var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                                                            first.screenX, first.screenY, 
                                                            first.clientX, first.clientY, false, 
                                                            false, false, false, 0/*left*/, null);

                                                                                                                                                                 first.target.dispatchEvent(simulatedEvent);
        event.preventDefault();
}

function init() 
{
        document.addEventListener("touchstart", touchHandler, true);
        document.addEventListener("touchmove", touchHandler, true);
        document.addEventListener("touchend", touchHandler, true);
        document.addEventListener("touchcancel", touchHandler, true);        
}

});
4

2 に答える 2