时间戳

首页 > 解决方案 > jQuery 选择器性能：Safari

javascript - jQuery 选择器性能：Safari

问题描述

我正在构建一个菜单页面，如果用户单击不是菜单链接的任何内容，她/他将被带回主页。这是页面： http: //newsite.paulwagenblast.com/design/

div ID 包装器的样式为：

<div id="wrapper" style="height: 100vh; position: fixed; top: 0; left: 0; margin: 0 auto; width: 100vw; z-index:-1;" class="hfeed">

本质上，包装器覆盖了整个页面，如果用户单击页面中心的菜单链接以外的任何内容，我希望将其送回主页。这是链接的 HTML：

<header class="header"> ... stuff ... <li class="menu-cloud xlarge"><a href="http://newsite.paulwagenblast.com/sample-design-page-2/">Sample Design Page 2</a></li> ... stuff ... </header>

我写的jQuery是：

jQuery(' div#wrapper:not("header") ').click(function() {
    window.location.assign("http://newsite.paulwagenblast.com/")
});

此代码和许多其他选择器变体尝试在 Firefox 和 Chrome 上运行良好，但在 Safari 上，单击任何内容都会将用户带回主页，包括应该带您到项目页面的链接。

我相信这是因为包装器的大小可以覆盖整个页面。包装器是固定位置的，z-index -1，菜单项是相对定位的，z-index 1，以尝试将它们放在包装器的前面。我相信由于定位，包装器总是在顶部，因为它是固定定位的。但是，即使我相对定位包装器并将其 z-index 保留为 -1，这也不能解决 Safari 中的问题。所以，我不确定这是 jQuery 还是 Safari 中的定位问题。

任何人都可以请告知，以便在单击菜单链接时用户不会转到此页面： 主页

标签： javascriptjquerycsssafari

解决方案

尝试

jQuery('div#wrapper').click(function(e) {
    if (jQuery(e.target).is(':not("header, header *")'))
       window.location.assign("http://newsite.paulwagenblast.com/")
});

header如果单击的元素不是自身或其后代，它将更改位置。

推荐阅读