返回课程

捕获元素中的链接

重要性:5

使所有位于 id="contents" 元素内的链接询问用户是否真的要离开。如果他们不离开,则不要跳转。

像这样

细节

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

打开一个沙箱进行任务。

这是事件委托模式的一个很好的应用。

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

我们只需要捕获 contents.onclick 并使用 confirm 询问用户。一个好主意是使用 link.getAttribute('href') 而不是 link.href 来获取 URL。有关详细信息,请参阅解决方案。

在沙箱中打开解决方案。