草庐IT

javascript - Angular - iPhone/iPad 上的 ng-blur 问题

coder 2023-09-27 原文

我用 AngularJS 1.4.7
我有可编辑的输入。如果我们专注于输入并在该输入字段之外单击后,脚本将执行功能 "save()"ng-blur .一切正常,但在 iPhone 5/6iPad不工作(不执行 ng-blur 中的任何内容)。我不知道为什么,但我推断问题出在 focus/touch行动。有人知道问题出在哪里吗?

最佳答案

修复 ng-blur 不适用于 iOS 的空白空间和大多数元素

目标

在我的应用程序中,我们希望在点击离开时隐藏打开的菜单或搜索结果
菜单或搜索框。

问题

从当前元素单击时,iOS Safari 无法正确模糊。

备注

您不需要特殊指令。问题不在于 ng-blur,它可以正常工作。问题是由于 Apple 在 iOS 上的不寻常设计,无论您使用 ng-blur 还是原生 DOM 模糊事件,都不会发生模糊事件。

问题原因

Apple 将移动 Safari 设计为执行与桌面浏览器不同的事件冒泡。根据 Apple 官方文档,如果单击的元素没有附加单击监听器,则不会触发单击事件。如果没有点击事件,焦点不会改变,也不会发生模糊事件,因此即使用户确实点击了页面上的其他位置,当前元素也不会失去焦点。

只有当用户单击带有单击事件监听器的元素时,才会发生模糊。像超链接和输入这样的元素有“内置”的点击事件监听器,所以总是会注册一个点击,导致模糊工作。

通常在桌面浏览器中,无论元素的 DOM 层次结构中是否有注册的监听器,都会盲目地触发 click 事件。这就是为什么 ng-blur 在桌面浏览器中按预期工作的原因,即使在“空白空间”上也是如此。

Apple 表示,对于 iOS Safari,他们只有在找到注册监听的元素时才会发送事件。

Apple Docs - go to Figure 6-4

Apple 的文档听起来好像他们正在寻找注册的事件监听器并在目标元素上进行处理,但事实并非如此。我在下面的文章中找到了答案,更重要的是,它的评论之一。

Quirksmode Article on iOS event delegation

首先,如果目标元素没有点击事件监听器和处理程序,请注意在文档或正文上放置监听器不会导致在 iOS Safari 上调度点击事件。它适用于大多数浏览器,但不适用于 iOS。

Apple 似乎正在检查直到 <body> 的 DOM 层次结构。在调度 click 事件之前标记,但不检查 <body>标签或以上。因此,您需要在 <body> 下方某处的某个元素上附加一个单击事件监听器。 .

解决方案/解决方法

那么解决方案非常简单。您需要做的就是将所有页面内容包装在一个“主”容器元素中,就在 <body> 下方。元素,并将监听器放在那里而不是放在正文或文档上。它甚至可以是一个空的处理函数。苹果只是检查一个是否已注册。包装所有内容的原因是,无论用户点击页面中的哪个位置,冒泡过程最终都会到达主容器。

如果你这样做,那么 ng-blur 将在 iOS 中按预期工作,因为空白空间上的点击事件(没有点击事件监听器的元素)将在找到父容器的点击事件监听器和点击事件时通过 iOS 检查将正常发送,就像在任何其他浏览器中一样。

注意

该解决方案有效地导致 iOS Safari 在每个 DOM 元素的层次结构上看到一个单击事件监听器,从而诱使它在每个元素上分派(dispatch)单击事件,就像普通浏览器一样。我不知道 Apple 是否出于性能原因在 iOS 中避免了这种情况,或者这是否只是审美/开发人员类型偏好(参见示例)。您将使用此解决方法更改应用程序中的默认 iOS 行为。

例如,iOS 用户可能会不小心在您的页面上选择了他们无意中的文本,并且如果没有单击并按住手势,通常不会发生这种情况。

关于javascript - Angular - iPhone/iPad 上的 ng-blur 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34608913/

有关javascript - Angular - iPhone/iPad 上的 ng-blur 问题的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库,所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止,这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  4. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题,我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  5. ruby-on-rails - date_field_tag,如何设置默认日期? [ rails 上的 ruby ] - 2

    我想设置一个默认日期,例如实际日期,我该如何设置?还有如何在组合框中设置默认值顺便问一下,date_field_tag和date_field之间有什么区别? 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag,如何设置默认日期?[rails上的ruby],我们在StackOverflow上找到一个类似的问

  6. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift,它运行良好,但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题?我尝试更新ruby​​gems,但它也给出了权限被拒绝的错误,我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  7. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据,该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中,我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤,而不是严格相等。然而,这是行不通的:scope:my_scope,->(que

  8. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  9. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java,并成功地将它与另一个Java包一起使用,但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  10. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章? - 2

    我意识到这可能是一个非常基本的问题,但我现在已经花了几天时间回过头来解决这个问题,但出于某种原因,Google就是没有帮助我。(我认为部分问题在于我是一个初学者,我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI,但我仍然停留在这个问题上.我找到了一些关于多态关系的信息,但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

随机推荐