event.target在手機上的工作方式有所不同嗎？

Question

我目前正在創建一個帶有“溢出”菜單的工具欄組件。 當有人點擊菜單外面時，我希望菜單關閉，所以我在文檔中附加了一個簡單的點擊處理程序，它檢查點擊的目標是在菜單內還是在菜單之外。 支票看起來像這樣：

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

因此，這適用於我PC上的Chrome中的所有實例。 如果單擊菜單外部，則將其設置為true。 如果單擊另一個菜單打開，則原始菜單將關閉，新的菜單將按預期打開。

在Chrome Android和iOS Safari上，行為有所不同。 如果您點擊頁面上不是菜單的任何地方，它會關閉任何打開的菜單; 但是，如果您點擊其他菜單，則會打開新菜單，但舊菜單仍然會打開。

我懷疑這與檢查的第二部分有關： overflowEl.find(event.target).length === 0 。

這在桌面上找不到該元素，但在移動設備上，即使您單擊其他菜單，它也會評估為true。

這對我來說似乎是個錯誤，但奇怪的是它發生在Android和iOS上，而不是在Chrome桌面上。

任何幫助將不勝感激。

編輯：添加更多我的代碼以獲得完整性

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

我仍然不完全理解為什么，或為什么原始版本在頁面上的大多數元素上工作（可能是沒有自己的事件的元素？），但它的工作原理。 向任何來這里尋找原始問題答案的人致歉。