ng-click on body 使用 ngTouch 打破移动设备上的链接和输入字段

Question

不确定是否有人可以在这里帮助我，我可能不得不想出一些不同的东西，但我想提出这个问题，因为我在这里没有找到类似的东西。

我有一个带有可滑动菜单的类似应用程序的网站，我希望它在用户点击菜单外的某处时消失。所以我使用 ngTouch 进行滑动并附加 ng-click="menuToggled = false" 以关闭 click/tap.

上的菜单

但是，如果 ng-click 附加到 body，菜单中的链接将不起作用，我无法将任何输入字段集中在 body 上。

这只发生在移动设备上：iOS 或 Android（或 chrome 设备模拟）。

正如我所说，我可能不得不考虑另一种解决方案来关闭点击菜单，但这个问题对我来说似乎很奇怪，也许有人对此有一些想法。

这是一个简单的演示，正如我所说，它可以在桌面上运行，但是如果您在 Chrome 上使用 F12 启用设备模拟，您将无法聚焦输入字段，除非您按住鼠标按钮：

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>

Answer 1

我无法解释您原来问题的真正原因。似乎 ng-click on body 标签不是一个好主意 - 我认为它在某些方面窃取了焦点..

我整理了一个有点复杂的解决方案 - 但它适用于桌面和模拟移动设备 - 在 Firefox 中测试 - 并处理 'click + touch' 问题：
http://jsfiddle.net/s_light/L85g3grs/6/

在按钮上设置点击事件：

<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);
        }
    };

}
]);

ng-click on body 使用 ngTouch 打破移动设备上的链接和输入字段

ng-click on body breaks links and input fields on mobile with ngTouch

javascript

angularjs

mobile

angularjs-ng-click

angularjs-ng-touch