javascript - 将 JavaScript 函数附加到将处理请求的标准链接？

Question

我的页面上有几个属于同一类的 DIV，并且包含带有由 FlowDock 自动生成的链接的简短语句（添加到 @mentions 的链接）。

有没有办法不将用户重定向到另一个 URL，而是在他们单击该链接时调用一个函数，这将过滤该页面上的语句，仅显示包含被单击的 @提及的 .entry DIV上？

这是一个例子：

<div class='entry' data-hashtags='#supermarkets #food #alcohol'>
    <p>#supermarkets sell #food and #alcohol <a title="Search @private" class="app-tag-link" href="/context/@private">@private</a></p>
</div>

用户单击@private，而不是转到 /context/@private，而是调用了一个 JavaScript 函数，该函数通过 jQuery 过滤 DIV，如下所示。

谢谢您的帮助！

Answer 1

当然-您想将侦听器附加到链接并调用preventDefault以防止链接的默认行为（即重定向）。

不使用 jQuery：

element.addEventListener('click', function(e) {
  e.preventDefault();
  // Filter
});

Fiddle

使用 jQuery：

// jQueryObject holds the selected set of element(s)
jQueryObject.on('click', function(e) {
  e.preventDefault();
  // Filter
});