[英]Mobile Safari sometimes does not trigger the click event
這是我正在處理的動態 JavaScript 應用程序。 我有許多具有 class 的<a>錨元素。單擊 class 時，應該會發生一些事情。 這在 Firefox、Chrome、IE 中工作正常，但在某些情況下，在移動設備 Safari（iPad 和 iPhone）上不會觸發點擊事件。
這些元素都具有完全相同的 CSS，只是它們的 position 不同（它們在不同的容器中）。
我嘗試了在這里找到的各種解決方案，但沒有成功。 例如：
您還有其他想法可以幫助我找到解決方案嗎？ 為什么點擊事件只在某些情況下觸發？
在 iOS 上點擊產生的點擊事件將在某些條件下按預期冒泡——您提到了其中之一，即光標樣式。 這是另一個：
目標元素或其任何祖先元素（包括但不包括
<body>）具有為任何鼠標事件設置的顯式事件處理程序。 此事件處理程序可能是一個空函數。
http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
這是更好的修復向量，無需瀏覽器檢查即可完成。 由於“不包括<body> ”部分，您必須添加額外的 div：
<body>
<div onclick="void(0);">
<!-- ... all your normal body content ... -->
</div>
</body>
現在，源自該 div 內的每個點擊事件都將在 iOS 中按預期冒泡（這意味着您可以使用$(document).on('click', '.class', etc...)捕獲它們）。
你試過這個嗎？？ 這是因為ios有時不會觸發click事件，只識別觸摸事件
$(document).on('touchstart click', [Selector], [ Event ]
只需聲明這些空事件偵聽器即可。 就試一試吧 ：）
這將使其適用於所有瀏覽器：
container.addEventListener('touchstart', () => {});
container.addEventListener('touchend', () => {});
container.addEventListener('touchcancel', () => {});
container.addEventListener('touchmove', () => {});
還有一個針對移動設備的額外事件。 除了click事件之外，嘗試添加tap事件偵聽器。 它們可以與以下同時連接：
$(document).on('click tap', [selector], [handler])
這是一個瘋狂的問題，實際上LinusR 的回答和對 quirksmode的描述是准確的。 因為在 iOS Safari 中，我的常規點擊事件偵聽器不起作用：
window.addEventListener('click', function(event) {
alert("Where's my click?!");
});
我現在已經用<div onclick="void(0);"></div>包裝了我的應用程序，並且有效。 我還添加了一些額外的東西來解決一些由此產生的問題：
<div onclick="void(0);" style="height: 100%; -webkit-tap-highlight-color: transparent;">
<div style="height: 100%; -webkit-tap-highlight-color: initial;">
<my-app></my-app>
</div>
</div>
我需要height: 100%; 使點擊在整個頁面上可用，因為我需要它。 如果不做height: 100%; click 事件仍然只會在 div 的高度內觸發。
-webkit-tap-highlight-color: transparent; 是為了防止 onclick flash 覆蓋樣式，因為 iOS 默認使用可點擊元素執行此操作。 之后的 div 恢復該 CSS 屬性的初始值，以便其他可點擊元素在這方面確實具有正常行為。 有關更多信息，請參閱此答案。
對我來說，這種行為是隨機的。 一切正常，但經過一些更改后，觸發某些按鈕的點擊事件確實出現了隨機問題。
問題是按鈕懸停在某些移動設備上（至少一些帶有 Safari 的 iOS iPad 對我來說）我通過在所有懸停中添加 @media 懸停和指針來修復它：
@media (hover: hover) and (pointer: fine) {
.topnav a:hover {
background-color: lightcoral;
}
}
這篇文章幫助我解決了這個問題（即使我在這里不使用 react） https://github.com/facebook/react/issues/7635#issuecomment-365089006
剛剛花了一個小時調試另一個瘋狂的場景，其中 Safari 吞下水龍頭，因為上述提示都沒有幫助，問題似乎無處不在。
tl; dr：如果底層 CSS 在懸停時導致回流，冒泡將不會到達回流發生的元素。
考慮以下標記：
container
div
span
container.addEventListener('click', MouseClick, false)
span {opacity: 0;}
div:hover {
span {opacity: 1;}
}
因此，在移動 Safari 中，點擊div元素不會收到click事件，因為第一次點擊等於懸停事件，這會觸發span上的 CSS 重排（比 div 小得多，並且是 OUTSIDE點目標坐標）。 同時，在同一個 div 中還有其他 css 懸停事件發生，這不會導致點擊次數丟失。
當我把它縮小到這個 CSS 時，我感到很震驚。幸運的是，它昨天被添加到代碼庫中並且很容易追蹤，但是神聖的網絡，Safari 真的很糟糕開發。
在我的例子中，按鈕有一個:hover/:focus和一個大小變化的屬性，比如 border: 3px。
小尺寸變化足以回流 position 並使點擊無效。
它發生在手機上只是因為空間有限。
iOS 9 上的 Safari 不會觸發隱藏輸入文件的點擊事件
[英]Safari on iOS 9 does not trigger click event on hidden input file
對於某些HTML內容，Click事件在safari mobile中不起作用
[英]Click event doesnt work in safari mobile for some HTML content
綁定到touchstart事件，導致自動對焦關注Mobile Safari中的任何點擊
[英]Binding to a touchstart event causing autofocus to focus on any click in Mobile Safari
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.