回到课程

捕获元素中的链接

重要程度: 5

使所有包含 id="contents" 的元素内的链接询问用户是否真的要离开。如果用户不想离开,那就不离开。

像这样:

细节:

  • 元素内的 HTML 可以被随时动态加载或重新生成,因此,我们无法找到所有链接并为其添加处理程序。这里使用事件委托。
  • 内容中可能有嵌套的标签。链接中也是,例如 <a href=".."><i>...</i></a>

打开一个任务沙箱。

这是一个很好的使用事件委托模式的案例。

在现实生活中,我们可以向服务器发送一个 “logging” 请求而不是询问,该请求会保存关于访问者离开位置的信息。或者,我们可以加载内容,并将其显示在页面中(如果允许的话)。

我们只需要捕获 contents.onclick,然后使用 confirm 来询问用户。一个好主意是使用 link.getAttribute('href') 来代替 link.href。详情请参见解决方案。

使用沙箱打开解决方案。