首页> 疑难解答

jquery如果在里面点击了链接 那么父链接在iPhone上第一次不起作用

withpy 2021-06-19

简介这真是一种奇怪的行为,我花了很多时间但却无法弄清楚这一点。功能是:根结构中有一个div作为移动按钮时......

这真是一种奇怪的行为,我花了很多时间但却无法弄清楚这一点。

The functionality is:

根结构中有一个div,当点击时它作为一个移动按钮,它打开一个导航div,它是上面div的父节点的兄弟div,这个div有<'ul'>和<'li'>每个<' li'>包含子导航,当点击子导航链接时,它会打开第三级导航而不会离开页面。然后当我点击上面的按钮关闭菜单时,它第一次不起作用,然后当我第二次再次点击它然后关闭菜单。

HTML:

<div id="headerArea">
    <div id="header-navigation">mobile menu/close button</div>
</div>

<div id="navigationMenu">
    <ul>
        <li><a>Link1</a></li>
        <li><a>Link2</a></li>
        <li><a>Link3</a></li>
    </ul>
</div>

JQuery:

$('#header-navigation').on('click',function(e){
    // This is a mobile menu when clicks, open the sub navigation and click back again it should close the menu but when clicks on sub navigation, then the first click doesn't work and it does on the second click. 
 });

$('#navigationMenu li a').on('click', function(){
    // when this clicks, the above link doesn't work the first time but it works the second time.
});

我做了另一个实验,在页面加载时,我在#navigationMenu中注入了另一个链接,但在<'ul'>之外,这是相同的行为然后我再次在“#navigationMenu ul”中注入相同的链接然后点击事件链接第一次工作。

由于某些原因,<'ul'>之外的任何链接都不起作用,这与<li'>中的点击有关

2
投票

我刚刚通过以下方式解决了这个问题。正如我所提到的,这是一个奇怪的问题,只发生在iPhone上 - Safari

JQuery:

$('#header-navigation').on('touchstart click',function(e){
    e.preventDefault(); //The reason I added that, with "touchstart", it was firing ghost clicks
});

上一篇:HTTP cookie如何运作?

下一篇:Java字符串IsValid检查

相关文章

  • 确定Windows 10 Touch键盘是可见还是隐藏

    我试图找出Windows 10虚拟触摸键盘是否可见,以确定是否从我的应用程序打开它。以下代码已经工作正常,直到最新的Windows ...

  • HTTP POST请求XML创建

    我想在Android活动中发出HTTP POST请求。我(认为我)知道如何这样做,但我的问题是我不知道如何创建XML文件。我试过不同的方法......

  • 具有单一特征的梯度下降中的特征缩放

    我正在为线性回归编写代码,其中我的模型将根据区域预测房屋价格。所以,我只有一个功能是房子的区域,我的输出是价格。我......

  • 将DocumentDB集合移动到Azure Data Lake存储

    我想知道将documentDB移动到Azure Data Lake Storage的最佳做法是什么。我应该为集合中的每个文档创建一个文件还是移动整个documentDB?我也没找到......

  • 删除带有两个ifs的重复项

    我们有一个Microsoft SQL Server表[数据库]。[dbo]。[UserInAppPurchase]包含以下列:[Id],[UserEmail],[UserId],[PurchaseDate],[ProductId],[TransactionId],[...

  • 显示flex是覆盖显示网格布局

    当我在其中包含显示器flex布局时,我的显示网格布局有问题。在我的第一个例子中,我有我想要的网格布局。它分为5列,标题...