Using ngTouch for ng-click events on the body element can cause issues with links and input fields on mobile

Question

Using ngTouch for ng-click events on the body element can cause issues with links and input fields on mobile

Seeking assistance with a unique issue I am facing on my app-like website. I have implemented a swipable menu but I want it to close whenever the user taps outside the menu. I have tried using ngTouch for swiping and attached ng-click="menuToggled = false" to achieve this functionality.

However, I encountered a problem where attaching ng-click to the body resulted in links within the menu not working and being unable to focus on input fields on the body. This issue only occurs on mobile devices such as iOS, Android, or when using Chrome device emulation.

I am considering alternative solutions to close the menu on tap, but I find this problem peculiar. Any thoughts or suggestions on how to resolve this would be greatly appreciated.

For a demonstration, you can view a simple demo here. Please note that it works on desktop, but when using device emulation in Chrome, you may encounter issues with input field focus unless you hold down the mouse button:

<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>

javascript angularjs mobile angularjs-ng-click angularjs-ng-touch

Answer 1

Answer №1

It's difficult to pinpoint the exact cause of your initial issue. It appears that using ng-click on the body tag may not be the best approach as it seems to interfere with focus in some cases.

I've come up with a somewhat intricate solution that has been tested on desktop and emulated mobile devices in Firefox. This solution effectively addresses the 'click + touch' issue. You can view the implementation here: http://jsfiddle.net/s_light/L85g3grs/6/

To set up the click event on the button, use the following code:

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

Then, include the corresponding handling in your controller:

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

    $scope.menu = {
        visible: false,
    };

    var menu_clickPrevent = false;

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

        $scope.menu.visible = false;

        $scope.$apply();

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

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

        if( !menu_clickPrevent ) {
            event.preventDefault();
            event.stopPropagation();

            $scope.menu.visible = true;

            menu_clickPrevent = true;
            $timeout(function () {
                menu_clickPrevent = false;
            }, 100);

            $document.on('click', menuHide);
        }
    };

}
]);

Answer 2

It's difficult to pinpoint the exact cause of your initial issue. It appears that using ng-click on the body tag may not be the best approach as it seems to interfere with focus in some cases.

I've come up with a somewhat intricate solution that has been tested on desktop and emulated mobile devices in Firefox. This solution effectively addresses the 'click + touch' issue. You can view the implementation here: http://jsfiddle.net/s_light/L85g3grs/6/

To set up the click event on the button, use the following code:

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

Then, include the corresponding handling in your controller:

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

    $scope.menu = {
        visible: false,
    };

    var menu_clickPrevent = false;

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

        $scope.menu.visible = false;

        $scope.$apply();

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

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

        if( !menu_clickPrevent ) {
            event.preventDefault();
            event.stopPropagation();

            $scope.menu.visible = true;

            menu_clickPrevent = true;
            $timeout(function () {
                menu_clickPrevent = false;
            }, 100);

            $document.on('click', menuHide);
        }
    };

}
]);

Using ngTouch for ng-click events on the body element can cause issues with links and input fields on mobile

Answer №1

Similar questions

Automate your workflow with Apps Script: Save time by appending a row and seamlessly including additional details to the

Having issues displaying the & symbol in HTML from backend data

What is the process for generating a three-dimensional surface using 3D points in Three.js?

The custom filter in AngularJS fails to activate when a click event occurs

Upon loading, the IntersectionObserver immediately declares the isIntersecting property true for all elements

The getInitialProps function in Next.js React components does not automatically bind props

Whenever I attempt to alter the text of a single button in the map using ReactJS, the change reflects on all buttons simultaneously

Using JavaScript to display a line using `document.write`

Is there a technique to block small increments in a Time Input field?

Unable to hide content in Shopify using @media

Tips for incorporating multi-lingual email templates into your node.js application

The art of transforming properties into boolean values (in-depth)

Using JavaScript to grab an entire div containing an SVG element

Exploring the contrast between window and document within jQuery

Gaining entry to specialized assistance through an occasion

I have been attempting to implement validation in JQuery, but it doesn't seem to be functioning correctly

Is it possible to utilize Angular's $http.get method with a dynamic route

Add a new component in front of another component based on its attribute value

Combining THREE.Sprite with fog or utilizing THREE.ParticleSystem with an array of texture maps

Include a query parameter each time a page is added to bookmarks