“编辑标签目标属性与添加事件监听器”在新窗口中打开答案

【问题标题】："Edit A tag target attribute vs Add eventlistener" to open on new window“编辑标签目标属性与添加事件监听器”在新窗口中打开
【发布时间】：2021-04-29 09:54:54
【问题描述】：

我正在处理一个有数百页的大型网站。现在，我想添加一个逻辑来编辑现有页面的锚标记的目标属性。在我的脚本中，我是否应该修改现有的目标属性并让浏览器处理 HTML？喜欢

$(this).attr('target', '_blank');

或者我应该添加一个 eventListener 来阻止默认执行并通过窗口对象处理重定向？喜欢

$(this).click(function(event){
       event.preventDefault();
       event.stopPropagation();
       window.open($(this).href(), '_blank');
});

哪个更好用？
总是比另一个好性能条款？

【问题讨论】：

两个 sn-ps 做不同的工作，你使用你需要的那个，在这种情况下的性能是没有意义的。
@Teemu 两个 sn-ps 如何做不同的事情？这两个 sn-ps 的动机都是在锚标记的 onclick 事件上打开一个新选项卡。
第一个 sn-p 让用户在没有 JS 干扰的情况下打开一个新选项卡，在第二个 sn-p 中您使用 JS 打开选项卡，这样可以与打开的选项卡交互，甚至关闭它以编程方式进行，这对于第一个 sn-p 是不可能的。
@Teemu 这是我的问题。从用户视图看这个。不关心功能是如何实现的。从用户的角度来看，如果您单击链接，它应该转到新标签中的 href url。我的问题是，应该以哪种方式实施。是通过js实现还是直接用js编辑HTML中的target属性更好？这会给我带来更好的表现。

标签： javascript html jquery

【解决方案1】：

如果您只想在新标签页中打开所有锚点，我会选择：

$('a').attr('target', '_blank');

因为它更快。

在这里进行性能测试：https://jsfiddle.net/7q01foa2/2/

我使用 JSFiddle 模板设置了性能测试（参见 stackoverflow answer），使用 benchmark.js

希望有帮助吗？

【讨论】：