javascript - ng-click 主体会通过 ngTouch 在移动设备上中断链接和输入字段

标签 javascript angularjs mobile angularjs-ng-click angularjs-ng-touch

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

我有一个类似应用程序的网站,带有可滑动菜单,我希望每当用户点击菜单外的某个位置时它就会消失。因此,我使用 ngTouch 进​​行滑动,并附加 ng-click="menuToggled = false"以在单击/点击时关闭菜单。

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

这只发生在移动设备上: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>

最佳答案

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

我已经整理了一个复杂的解决方案 - 但它可以在桌面和模拟移动设备上运行 - 在 Firefox 中进行了测试 - 并处理“点击+触摸”问题:
http://jsfiddle.net/s_light/L85g3grs/6/

设置按钮的点击事件:

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

并在 Controller 中添加处理:

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

}
]);

关于javascript - ng-click 主体会通过 ngTouch 在移动设备上中断链接和输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32327582/

相关文章:

javascript - Android Chrome 上的 HTML Canvas 不滚动窗口

javascript - 将 div 置于图像顶部

jquery - 移动横向转换期间字体大小未保持

javascript - jQuery 实际图像尺寸

javascript - 如何在 jQuery 中使用两个或多个时间选择器

javascript - 将 Vueify 用于在 Vue.js 中仅运行时构建的组件

javascript - 将 <a href> 设置为变量

javascript - 如何使用 angular.element 选择 id?

javascript - java.lang.RuntimeException : Unable to start activity Component Info 错误

java - 如何为 css、js、jsp 文件提供版本控制