javascript - 在 HTML 中添加 onclick 和从 Javascript 调用会冲突吗？

Question

我有一个 anchor 链接，它附加了一个 onclick 事件。基本上，点击它会打开一个 Facebook 分享弹出窗口。

<a target="_blank" 
   href="https://www.facebook.com/sharer/sharer.php?u=MYLINK" 
   onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"
>Share on Facebook</a>

现在我想使用 Google Analytics Universal Tracking 事件跟踪来跟踪它。因此，我向要跟踪的每个 anchor 添加了一个名为 track 的类。我的意图是运行以下 javascript 代码

$('.track').click(function (e) {
    ga('send', 'event', 'button', 'click', 'nav-buttons');
});

click 和 nav-buttons 值将通过 HTML5 数据变量动态插入。 (它将附加到 anchor )

<a target="_blank" class="track"
   href="https://www.facebook.com/sharer/sharer.php?u=MYLINK" 
   data-event="click"
   data-label="nav-buttons"
   onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"
>Share on Facebook</a>

如何整合整个事情？两个onclick事件会起作用吗？还是只有一个会起作用？实现这个的最佳方法是什么。请指导。

Answer 1

最好的办法是从 onclick 中删除一些东西，并对两者使用相同的方法 — 即使用 jQuery 添加事件监听器。

$('.track').click(function(e){
  e.preventDefault();
  ga('send', e.type, 'button', 'click', 'nav-buttons');
});

$('a.facebookshare').click(function(e){
  e.preventDefault();
  window.open(this.href, '',
    'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'
  );
});

因此您将使用以下标记:

<a target="_blank" class="track facebookshare"
  href="https://www.facebook.com/sharer/sharer.php?u=MYLINK" 
  data-label="nav-buttons"
  >Share on Facebook</a>

我已经删除了 data-event，因为您可以从事件对象本身读取它。

不久前，我在 ga-track 类中实现了类似的功能，然后我通过 GUI 公开了此功能，允许网站所有者轻松地为几乎所有内容设置跟踪事件...简而言之，这是一种很好的方法，可以让您的跟踪得到普遍化，以便可以将其应用到您希望的任何地方。