Javascript 为什么Bootstrap 4转盘暂停功能在'；旋转木马中的一个元素事件调用了什么？

因此，我试图围绕这个问题来思考，昨天我问了一个问题：

我发现了症状，所以我用新的焦点问了一个新问题

问题标题并不能说明一切，因为它太大了： 这只发生在手机上，使用移动浏览器，在桌面上完全可以

基本上，如果您有一个Bootstrap 4旋转木马，并且您有一个div中的任何元素，该元素的id为旋转木马，并且您希望在该元素上附加一个事件（如单击）以暂停旋转木马，那么它根本不起作用，滑块将继续循环

我尝试过单击、mousedown、mouseup，我尝试过在body上设置选择器的click事件，尝试调用外部选择器上的click事件来暂停它，使用了parents等等，但都不起作用

创建了一个按钮，该按钮位于旋转木马的正外部，并在其上附加了一个单击事件，该按钮可以正常工作。 我使用的是最新的BS（4.4.1）

这是我的代码：

刀片文件：

<div id='slider'>
    <button class='pause-carousel' role='button'>Pause from outside</button>
    <div id='sme-directory-gallery' class='carousel slide' data-ride='carousel'>
        <button class='pause-carousel-2' role='button'>Pause from inside</button>
        <div class='carousel-inner'>
            @foreach($directoryInfo->videos as $index => $video)
                <div class='item carousel-item {{ $index === 0 ? 'active' : '' }}' data-slide-number='{{ $index }}'>
                    <div class='video-mask'></div>
                    <div class='d-flex justify-content-center'>
                        <div class='embed-responsive embed-responsive-21by9'>
                            <iframe class='embed-responsive-item player' src='{{ 'https://www.youtube.com/embed/' . substr($video->url, strrpos($video->url, 'v=') + 2) }}' allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            @endforeach

            @foreach($directoryInfo->images as $index => $image)
                <div class='item carousel-item {{ ($index + sizeof($directoryInfo->videos)) === 0 ? 'active' : '' }}' data-slide-number='{{ $index + sizeof($directoryInfo->videos) }}'>
                    <div class='d-flex justify-content-center'>
                        <img src='{{ asset('storage/' . $image->path) }}' class='img-fluid' alt='imagen'>
                    </div>
                </div>
            @endforeach

            <a class='carousel-control-prev' href='#sme-directory-gallery' role='button' data-slide='prev'>
                <div class='rounded-circle'>
                    <span class='carousel-control-prev-icon' aria-hidden='true'></span>
                    <span class='sr-only'>Previous</span>
                </div>
            </a>
            <a class='carousel-control-next' href='#sme-directory-gallery' role='button' data-slide='next'>
                <div class='rounded-circle'>
                    <span class='carousel-control-next-icon' aria-hidden='true'></span>
                    <span class='sr-only'>Next</span>
                </div>
            </a>
        </div>

        <ul class='carousel-indicators list-inline'>
            @foreach($directoryInfo->videos as $index => $video)
                <li class='list-inline-item my-2 {{ $index === 0 ? 'active' : '' }}'>
                    <a id='carousel-selector-{{ $index + sizeof($directoryInfo->videos) }}' class='sme-gallery-anchor' data-slide-to='{{ $index }}' data-target='#sme-directory-gallery'>
                        <img src='{{ 'https://img.youtube.com/vi/' . substr($video->url, strrpos($video->url, 'v=') + 2) . '/mqdefault.jpg' }}' class='img-fluid'>
                        <div class='text-white sme-gallery-middle-icon'>
                            <span class='fas fa-play'></span>
                        </div>
                    </a>
                </li>
            @endforeach

            @foreach($directoryInfo->images as $index => $image)
                <li class='list-inline-item {{ $index + sizeof($directoryInfo->videos) === 0 ? 'active' : '' }}'>
                    <a id='carousel-selector-{{ $index + sizeof($directoryInfo->videos) }}' data-slide-to='{{ $index + sizeof($directoryInfo->videos) }}' data-target='#sme-directory-gallery'>
                        <img src='{{ asset('storage/' . $image->path) }}' class='img-fluid'>
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
</div>

这里到底发生了什么，我该怎么解决

---

提前感谢。

尝试以下内容以了解问题：

放置console.log或alert（）以检查事件是否已触发

    $('.pause-carousel-2').on('click', function () {
        console.log('Button Clicked');
        $('#sme-directory-gallery').carousel('pause'); // it wont work
    });

案例1：

如果控制台中未打印“按钮单击”，则您可以尝试：

$（'body'）。在（'click'，'pause-carousel-2'，function（）{…

案例2：

如果打印了“按钮单击”，则此问题有一个解决方案，您可以尝试

使用触发器

    $('.pause-carousel-2').on('click', function () {
        $('.pause-carousel').trigger("click");
    });

并隐藏暂停按钮，该按钮位于外部

---

请分享您的结果，我们将尝试解决您的问题。

将暂停设置为false，这将解决问题

$('.carousel').carousel({
    pause: "false"
});

您可以在这里看到一个示例：

如果您使用

.carousel（）

作为变量，它将起作用。

var slider=$（“#元素”）.carousel（）；

并且您可以在所有事件中使用。

slider.carousel（'pause'）；

，用于再次启动：

slider slider.carousel（{'pause'：false}）

使用多元素单击事件时：

$('#btn1, #btn2').click(function(){
slider.carousel('pause');
});

在另一个事件中（悬停）：

如果未将其分配给变量，则旋转木马将重新启动 在每个事件中

我添加了一个examp（它可以工作）：

$（函数（）{
变量滑块=$（'#carouselExampleSlidesOnly'）。carousel({
间隔时间：1000
});
$（“#暂停”）。单击（函数（）{
滑动旋转木马（“暂停”）；
});
$（“#开始”）。单击（函数（）{
slider.carousel（{'pause'：false}）；
});
})；

.carousel项目{
填充顶部：45px；
文本对齐：居中；
高度：150像素；
宽度：100%；
颜色：#fff；
背景色：#666；
字号：2rem；
字号：700；
}

暂停
开始
幻灯片1
幻灯片2
幻灯片3

为了记录在案，需要注意的是，这个问题一直存在，而且似乎也适用于其他人（在iOS上的Chrome mobile v79上）。我在Android上的Firefox v68.3上测试了自己，它也能正常工作。我建议您在CodePen或SO上创建一个简单的代码片段，以排除其他地方存在的问题。确认删除

暂停：“false”

使暂停功能停止在移动设备上而不是桌面上的Firefox上工作。也许您可以在GH中报告并链接回此问题。

$('#btn1, #btn2').click(function(){
slider.carousel('pause');
});

$('#yourSlider').hover(function(){
  slider.carousel('pause');
  }, function(){
  slider.carousel({'pause': false});
});