Angular - iPhone / iPad上的ng-blur問題
[英]Angular - issue with ng-blur on iPhone/iPad
問題描述
我使用AngularJS 1.4.7
我有可編輯的輸入。 如果我們專注於輸入並在此輸入字段之外單擊后，腳本將在ng-blur執行"save()"功能。 一切正常，但在iPhone 5/6和iPad上無法正常工作（不能在ng-blur執行任何操作）。 我不知道為什么，但我推斷這個問題是focus/touch動作。 有人知道問題出在哪里？
2 個解決方案
解決方案1
6 2016-03-12 19:09:03
修復ng-blur無法處理空白空間和大多數iOS元素
目標
在我的應用程序中，我們希望在單擊菜單或搜索框時隱藏打開的菜單或搜索結果。
問題
單擊遠離當前元素時，iOS Safari無法正常模糊。
注意
您不需要特殊指令。 問題不在於ng-blur，它工作正常。 問題在於，由於Apple在iOS上的不尋常設計，無論是否使用ng-blur或原生DOM模糊事件，都不會發生模糊事件。
發行原因
Apple設計了移動Safari來執行事件冒泡，這與桌面瀏覽器不同。 根據官方Apple文檔，如果單擊的元素沒有附加單擊偵聽器，則不會觸發任何單擊事件。 如果沒有單擊事件，焦點不會更改並且不會發生模糊事件，因此即使用戶確實單擊了頁面上的其他位置，當前元素也不會失去焦點。
只有當用戶單擊帶有單擊事件偵聽器的元素時，才會出現模糊。 某些元素（如超鏈接和輸入）具有用於單擊的“內置”事件偵聽器，因此將始終注冊單擊，從而導致模糊工作。
通常在桌面瀏覽器中，無論元素的DOM層次結構中是否存在已注冊的偵聽器，都會盲目觸發click事件。 這就是為什么ng-blur在桌面瀏覽器中按預期工作，即使在“空白空間”也是如此。
Apple表示，對於iOS Safari，只有在找到注冊的元素才能收聽該事件時，他們才會調度該事件。
Apple的文檔聽起來像是在尋找已注冊的事件監聽器並在目標元素上處理，但事實並非如此。 我在下面的文章中找到了答案，更重要的是，它給出了一個評論。
首先，觀察如果目標元素沒有單擊事件偵聽器和處理程序，則在iOS上安裝偵聽器不會導致在事件上調度click事件。 它適用於大多數瀏覽器，但不適用於iOS。
在調度click事件之前，Apple似乎正在檢查DOM層次結構到 <body>標記，但是沒有檢查<body>標記或更高版本。 因此，您需要一個附加到<body>下面某個元素的click事件偵聽器。
解決方案/解決方法
那么解決方案非常簡單。 您需要做的就是將所有頁面內容包裝在<body>元素正下方的“master”容器元素中，並將偵聽器放在那里而不是在主體或文檔上。 它甚至可以是一個空的處理函數。 Apple僅檢查是否已注冊。 包裝所有內容的原因是，無論用戶點擊的頁面在哪里，起泡過程最終都會到達主容器。
如果你這樣做，那么ng-blur將在iOS中按預期工作，因為空白空間上的click事件（沒有click事件監聽器的元素）將在找到父容器的click事件監聽器和click事件時通過iOS檢查將被正常發送，就像在任何其他瀏覽器中一樣。
警告
此解決方案有效地使iOS Safari在每個DOM元素的層次結構上看到一個單擊事件偵聽器，誘使它在每個元素上調度click事件，就像普通的瀏覽器一樣。 我不知道Apple是否有性能原因他們在iOS中避免這種情況，或者它只是美學/開發者類型偏好（參見示例）。 您將使用此變通方法更改應用中的默認iOS行為。
例如，iOS用戶可能會意外地在您的頁面上選擇他們並不意味着的文本，並且如果沒有單擊並按住手勢通常不會發生這種情況。
解決方案2
0 2016-01-05 10:39:57
我不知道為什么會出現這個問題。 但做一件事。 創建一個小指令'假模糊'。 然后在該指令中調用您的方法
App.directive('fakeBlur', function(){ return { restrict: 'A', link: function(scope, element, attrs) { element.blur(function(){ // call you function ex: scope.save(); }) } } });
<input type="text" fake-blur/>
角度：檢查值ng-blur
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.