Does event.target work differently on mobile phones?

Question

I am currently creating a toolbar component with an overflow menu. When someone goes outside the menu, I want the menu to close, so I attached a simple click handler to the document that checks if the click’s target is inside or outside the menu. The check is as follows:

var eventOutsideTarget = (overflowEl[0] !== event.target) 
    && (overflowEl.find(event.target).length === 0);

So this works in all cases in Chrome on my PC. If you click outside the menu, it will be set to true. If you click on another menu that opens, the original menu closes and a new one opens as expected.

On Chrome Android and iOS Safari, the behavior is different. If you click on any page that is not a menu, it closes all open menus; however, if you click on another menu, it will open a new one, but the old one still opens.

I suspect that it is related to the second part of the test: overflowEl.find(event.target).length === 0.

This does not find the item on the desktop, but on the mobile phone it is rated as true, even if you click on another menu.

It seems to me that this is a mistake, but it is strange that this happens on Android and iOS, but not on the Chrome desktop.

Any help would be greatly appreciated.

Edit: adding some more of my code for completeness

angular.module('s4p.directives').directive('s4pToolbar', function ($compile, $document) {

    return {

        restrict: 'E',
        scope: {},
        controller: 's4pToolbarCtrl',
        transclude: true,
        template:   '<s4p-toolbar-main><div transclude-main></div></s4p-toolbar-main>' + 
                    '<s4p-toolbar-overflow-button ng-class="{&quot;is-open&quot;:overflowOpen}">' + 
                        '<s4p-button button-style="circle" icon="/images/iconSprite.svg#dot-menu" ng-click="toggleOverflow()"></s4p-button>' + 
                         '<s4p-toolbar-overflow ng-show="overflowOpen" class="ng-hide" ng-cloak><div transclude-overflow></div></s4p-toolbar-overflow>' +
                    '</s4p-toolbar-overflow-button>'


        ,
        link: function (scope, element, attrs, controller, transclude) {

            // Copy the contents of the toolbar into both slots in the template
            transclude(scope, function(clone) {
                element.find('[transclude-main]').replaceWith(clone);
            });

            transclude(scope, function(clone) {
                element.find('[transclude-overflow]').replaceWith(clone);
            });


            // Handle clicking anywhere on the page except the overflow to close it.
            var overflowEl = element.find('s4p-toolbar-overflow-button');

            var documentClickHandler = function (event) {

                var eventOutsideTarget = (overflowEl[0] !== event.target) && (overflowEl.find(event.target).length === 0);

                if (eventOutsideTarget) {
                    scope.$apply(function () {
                        scope.overflowOpen = false;
                    });
                }
            };

            $document.on("click", documentClickHandler);
                scope.$on("$destroy", function () {
                $document.off("click", documentClickHandler);
            });

            // Update the visibility of all the sections
            controller.updateSectionsVisibility();

        }


    };


})

Answer 1

, event.target, 3 !?

, , , , , , .

,

$document.on("click", documentClickHandler);

...

$document.on("click touchstart", documentClickHandler);

, , (, , ?), . , .