使用.click（）方法與移動Safari

我遇到了使用移動Safari的問題，其中jQuery的.click（）方法似乎沒有觸發。據我所知，我的代碼似乎在所有其他移動瀏覽器上工作。有其他人遇到這個問題嗎？這似乎是一個普遍的問題。使用.click（）方法與移動Safari

我使用的錨。點擊（）方法來顯示一個登錄表單：

$(".login").click(function(){ 
    $("#login-form").toggle(); 
    $("#login-username").focus(); 
    $(".login").toggle(); 
});

是什麼導致這或替代方法，將不勝感激任何建議！我已經在所有其他移動和桌面瀏覽器上測試了代碼，但沒有發現任何問題。謝謝！

編輯 - 下面是HTML和CSS相關：

HTML：

<div id="login-div"> 
    <a class="login">Login</a> 

    <!-- Login form --> 
    <form id="login-form" action="action"> 
     <div> 
     <input type="username" id="login-username" placeholder="email"/> 
     <input type="password" id="login-password" placeholder="password"/> 
     <input type="submit" id="login-button" value="Sign In"/> 
     <div> 
      {{> inputErrors}} 
      <a class="lost_password">Lost Password?</a> 
     </div> 
     </div> 
    </form> 
    </div>

CSS：

#login-div { 
    margin: 5px -10px; 
    text-align: right; 
} 

.login { 
    vertical-align: -webkit-baseline-middle; 
    color: #d4d4d4; 
    font-family: "arial"; 
    font-size: 1rem; 
    font-size: 16px; 
    font-weight: 200; 
} 

#login-form { 
    display: none; 
    width: 100%; 
} 

#login-username:focus, #login-username:active, #login-password:focus, #login-password:active { 
    -moz-box-shadow: 0px 0px 0.5rem 0px #8e8d8d; 
    -webkit-box-shadow: 0px 0px 0.5rem 0px #8E8D8D; 
    -o-box-shadow: 0px 0px 0.5rem 0px #8e8d8d; 
    box-shadow: 0px 0px 0.5rem 0px #8E8D8D; 
    outline-color: #8E8D8D; 
}

來源

2015-06-18 bgmaster

請首先檢查您的按鈕是否被另一個外部div所覆蓋 –

任何jsfiddle帶有一點點代碼？ –

我在上面添加了其他代碼。它由外部股利覆蓋。那應該不是一個問題，應該嗎？ – bgmaster

所以我最終得到這種通過移動錨出更高水平的div的工作。我不知道爲什麼這會起作用，但如果你嘗試了所有其他的建議來處理移動Safari瀏覽器中的這個怪癖，那麼這個可能會奏效。

來源

2015-06-22 12:27:33 bgmaster

嘗試增加touchend。 click有一些陷阱在移動Safari瀏覽器：

$(".login").on('click touchend', function(){ 
    $("#login-form").toggle(); 
    $("#login-username").focus(); 
    $(".login").toggle(); 
});

來源

2015-06-18 15:41:11 Blaise

沒有運氣： - /我意識到，雖然登錄類實際上包裹在約4個div。這會對事件冒泡有影響嗎？ – bgmaster

嵌套的深度可能並不重要。也許你受到本文＃2的影響：http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari - 或者，它可能是一個樣式問題，其中'.login'被一個不是'.login'的子元素的元素覆蓋。你可以通過向元素添加不同的背景顏色來檢查。 – Blaise

我發現這篇文章發佈在這裏後，但作者的建議似乎沒有幫助我。我想知道一個覆蓋，但似乎會導致其他移動瀏覽器，以及沒有任何問題。我確實將錨點移出了div，但它確實有效。我只需要弄清楚如何正確地設計它的樣式，而不需要將它嵌套到div中。 – bgmaster

使用.click（）方法與移動Safari

回答

相關問題