Lightbox2 不会阻止浏览器跟随链接答案

【问题标题】：Lightbox2 not preventing the browser from following linkLightbox2 不会阻止浏览器跟随链接
【发布时间】：2021-04-20 08:07:01
【问题描述】：

我正在尝试使用Lightbox2，并且我已经正确设置了data-lightbox 属性（由下面的鼠标悬停案例演示）。如果我修改 Lightbox JS 代码来替换：

$("body").on("click", ...)

到

$("body").on("mouseover", ...)

灯箱工作得很好。

但是，当事件是“点击”时，浏览器会导航到目的地，而不是简单地在灯箱中显示引用的图像。完整的点击监听回调是：

      $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
          self.start($(event.currentTarget));
          return false;
    });

...这应该会阻止浏览器跟踪链接（因为return false;）。

JS 控制台没有显示任何错误，所以我相信self.start(...) 方面工作正常，同样，如果我简单地将click 替换为mouseover，灯箱会按预期工作。

有没有其他人经历过这种情况（并且知道解决方法以及可能出现的问题）？

【问题讨论】：

标签： javascript lightbox2

【解决方案1】：

当你得到点击事件时，你可以运行event.preventDefault()。这将禁用浏览器通常会执行的所有操作，例如点击链接。

这是 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
    event.preventDefault();
    self.start($(event.currentTarget));
});

【讨论】：

我试过了，但没有用。我认为根本问题是由于某种原因根本没有检测到/处理“点击”事件......即我认为根本没有调用回调。然而，如果我只是将事件更改为鼠标悬停，回调 is 被调用，所以我很难过。

【解决方案2】：

小家伙，我想通了。我正在使用停止所有锚点点击的 DataTables 插件（除非满足特定条件）。

没关系！

【讨论】：