ng-click на теле разрывает ссылки и поля ввода на мобильном телефоне с помощью ngTouch

Не уверен, что кто-нибудь сможет мне здесь помочь, возможно, мне придётся придумать что-то другое, но я хотел обговорить эту проблему, так как я не нашел ничего подобного здесь.

У меня есть веб-сайт, похожий на приложение, со сменным меню, и я хочу, чтобы он исчезал всякий раз, когда пользователь нажимает где-то за пределами меню. Поэтому я использовал ngTouch для смахивания и прикрепил ng-click="menuToggled = false", чтобы закрыть меню при нажатии / нажатии.

Однако, если ng-click прикреплен к телу, ссылки в меню не работают, и я не могу сфокусировать любое поле ввода на теле.

Это происходит только на мобильных устройствах: iOS или Android (или эмуляция устройства Chrome).

Как я уже сказал, мне, вероятно, придется подумать о другом решении, чтобы закрыть меню при нажатии, но эта проблема кажется мне странной, возможно, у кого-то есть какие-то мысли по этому поводу.

Вот простая демонстрация, как я уже сказал, она работает на рабочем столе, но если вы включите эмуляцию устройства с помощью F12 в Chrome, вы не сможете сфокусировать поле ввода, если не удержите кнопку мыши:

http://jsfiddle.net/L85g3grs/

<body ng-app="myApp" ng-click="showMenu = false">
    <input type="text">
    <button type="button" ng-click="showMenu = true; $event.stopPropagation();">Show menu</button>
    <div class="menu" ng-show="showMenu"></div>        
</body>
Источник

1 ответ

Решение

Я не могу объяснить настоящую причину вашей первоначальной проблемы. кажется, что нг-клик на теге тела не очень хорошая идея - я думаю, что он в некотором смысле крадет фокус

Я собрал довольно сложное решение - но оно работает на настольных компьютерах и эмулированных мобильных устройствах - протестировано в Firefox - и решает проблему "нажми + коснись":
http://jsfiddle.net/s_light/L85g3grs/4/

установить событие нажатия на кнопку:

<button type="button" ng-click="menuShow($event)">
    Show menu
</button>

и добавьте обработку в вашем контроллере:

app.controller('MainController',[
    '$scope',
    '$document',
    '$timeout',
function($scope, $document, $timeout) {

    // using deep value so that there are no scope/childscope issues
    $scope.menu = {
        visible: false,
    };

    // our internal clickPrevent helper
    var menu_clickPrevent = false;

    function menuHide(event) {
        console.log("menuHide");

        // set menu visibility
        $scope.menu.visible = false;

        // we need a apply here so the view gets updated.
        $scope.$apply();

        // deactivate handler
        $document.off('click', menuHide);
    }

    $scope.menuShow = function(event) {
        console.log("menuShow", event);

        // check if we are already handling a click...
        if( !menu_clickPrevent ) {
            // stop default and propagation so our hide handler is not called immediate
            event.preventDefault();
            event.stopPropagation();

            // make menu visible
            $scope.menu.visible = true;

            // prevent 'double click' bugs on some touch devices
            menu_clickPrevent = true;
            $timeout(function () {
                menu_clickPrevent = false;
            }, 100);

            // activate document wide click-handler
            $document.on('click', menuHide);
        }
    };

}
]);
Источник
Другие вопросы по тегам