event.target在手机上的工作方式是否不同
Does event.target work differently on mobiles?
我目前正在创建一个带有"溢出"菜单的工具栏组件。当有人在菜单外单击时,我希望菜单关闭,因此我将一个简单的单击处理程序附加到文档,该处理程序检查单击目标是在菜单内还是菜单外。支票如下所示:
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="{"is-open":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();
}
};
})
好的,所以答案与 event.target 无关,尽管这并没有阻止我浪费 3 个小时来思考它!
问题是,当您单击另一个菜单按钮时,对文档正文的单击根本没有注册,尽管单击菜单按钮正在触发并打开菜单,但对文档正文的单击被忽略,尽管它在单击文档的其他部分时确实有效。
解决方法是此行
$document.on("click", documentClickHandler);
需要这个...
$document.on("click touchstart", documentClickHandler);
我仍然不完全明白为什么,或者为什么原始版本适用于页面上的大多数元素(也许是没有自己事件的元素?),但它有效。向任何来这里寻找原始问题的答案的人道歉。
相关文章:
- 使用Angular存储用户以前是否选中过复选框,然后再调用它的最佳方式是什么
- 是否可以在JqGrid中按字母顺序以外的其他方式对组进行排序
- 我们跟踪JavaScript文件的方式是否包含在其他网站中
- PHP是否以与JavaScript相同的方式解释代码
- 在node.js中,如何以最轻量级的方式检查给定的代码字符串在语法上是否正确
- 这个 getter-setter 闭包是否有充分的理由以这种方式在其内部对象中声明它是私有的
- 是否可以检索用户在我的页面上以编程方式使用的搜索词
- 是否可以以编程方式打开安卓设备的蓝牙并与其他设备连接
- 如何确定是否已以编程方式检查无线电
- 是否可以以非递归方式遍历 JavaScript 中的对象
- 工具提示是否有跨浏览器方式
- 是否可以以编程方式打开谷歌地图POI信息窗口
- 以编程方式确定是否可以在对象上运行 for 循环的最佳解决方案
- 浏览器实现同源策略的方式是否存在实质性差异
- event.target在手机上的工作方式是否不同
- 我让用户将脚本加载到网页中的方式是否有区别
- 命名函数的声明方式是否重要
- 判断粘贴快捷方式是否为'ctrl + v'或者'cmd + v'
- 下面的反射语言特性和标准实现方式是否有名称?
- 定义JS函数的方式是否会影响它的“性能”