如何从引导轮播指示器项目中删除事件处理程序答案

【问题标题】：how to remove eventhandler from bootstrap carousel indicator items如何从引导轮播指示器项目中删除事件处理程序
【发布时间】：2022-02-09 04:47:47
【问题描述】：

我正在使用 bootstrap5 轮播，我想在单击上一个或下一个指标时触发自定义事件。我想阻止默认引导事件触发。我尝试了很多不同的技术，但都没有成功。

有人知道怎么做吗？

Mtia

【问题讨论】：

标签： javascript bootstrap-5 event-listener bootstrap-carousel removeeventlistener

【解决方案1】：

查看官方文档。它有一些可以添加到 JavaScript 中的侦听器。

不过，您需要确保添加 Bootstrap CDN 或带有 JavaScript 的 npm 模块才能使其正常工作。

Bootstrap Documentation

示例

const myCarousel = document.querySelector("#myCarousel");
const carousel = new bootstrap.Carousel(myCarousel, { interval: 2500 });

myCarousel.addEventListener("slide.bs.carousel", () => { /* Do something... */ });

【讨论】：

恐怕这不能回答我的问题。我检查了文档，没有与单击轮播后退和前进按钮有关的事件列表，这就是我所追求的。我想使用 removeEventListener，但找不到事件名称或调用的方法。
对不起我的问题。但是，您在 Stack Overflow 上的this link 有一个类似的问题。
感谢 Amav，我们将不胜感激。您在评论中提供的链接实际上可能是我正在寻找的 - 要阻止轮播自动滑动，请删除 bs-ride attr。
很遗憾没有。删除 data-bs-ride="carousel" 会阻止构建轮播。我的问题是我正在随机化一个元素数组，它工作正常，直到我使用 prev 和 next 按钮，此时，即使最初显示了正确的元素，引导事件处理程序调用'cycle'，然后依次显示该图像之后的一个，而不是随机数组中跟随它的元素，因此希望删除事件处理程序。
好的，我会尝试找到更多可能有帮助的链接！

【解决方案2】：

你试过e.stopPropagation()或e.stopImmediatePropagation()

【讨论】：

是的，我有。不幸的是，bootstrap 使用 eventdelegation，因此它在文档上有一个监听器，用于监听事件，然后将它们传递到正确的位置。引导代码有一个类“EventHandler”，它可能有助于删除监听器，但我无法访问它，因为它不是公开的，我想。 EventHandler 位于github.com/twbs/bootstrap/blob/main/js/src/dom/event-handler.js，我不确定如何将模块导入非模块代码。

【解决方案3】：

我最终找到了解决方案。我以编程方式将 bs-slide-to 放置在下一个和上一个指标上，这导致事件处理程序触发。因此，要停止引导事件处理程序，从下一个和上一个指标中删除 bs-slide-to 和 bs-slide 属性，该事件不会触发。我删除了它，并使用了自定义事件处理程序，它工作正常（我希望）。

【讨论】：