Javascript 伪类：仅在Firefox中不应用活动类

我现在正在构建一个滑块组件，当按下鼠标按钮时，应该应用伪类：active，当释放鼠标按钮时，应该将其移除。这在Chrome中非常有效，但在Firefox中似乎没有应用该类

CSS:

HTML:

<div class="container-fluid">

<div class="row">

    <div class="col-md-12">
        <h4 class="text-black p-t-md p-b-md">Single Value Sliders</h4>
    </div>

    <div class="col-md-6 p-r-md p-b-md">
        <p class="text-black p-b-md">Button Handle - Custom Labels</p>
        <ux-slider [value]="slider1.value" [options]="slider1.options"></ux-slider>
    </div>
</div>

我在Angular工作，因此我在plunker中提供了一个例子：

有人能解释一下问题是什么以及我如何解决它吗？：active类在Chrome中按预期应用，但在Firefox中没有

我已经考虑过了，但我认为这是一个不同的问题，因为OP期望：active的功能与：focus相同

---

谢谢

我已经核对了代码，从你的角度看似乎是正确的。它是一个库，它在阻止DOM应用的元素上绑定很少的单击事件：单击时激活

所以我建议在github上报告这个问题，直到那时，使用@hostlistners回调来解决这个问题

您可以检查他们是如何实现鼠标上下移动的。使用相同的aproach并应用活动类

---

可能的重复我认为这不是重复。我认为这篇文章是用户期望的：active的功能与：focus相同直到你得到一个解决方案，你可以在开始和结束时处理回调。分别添加活动类和删除类。我也可以复制这个。看起来像个虫子。我查看了slider的源代码——ux slider在其模板中为每个元素使用了大量的类绑定和侦听器，所以我只是想知道它是否会导致firefox错过/忽略活动。首先，我将在一个尽可能少的绑定的裸体版本中重新创建ux滑块组件，然后看看它是否工作正常。我会的，谢谢。

<div class="container-fluid">

<div class="row">

    <div class="col-md-12">
        <h4 class="text-black p-t-md p-b-md">Single Value Sliders</h4>
    </div>

    <div class="col-md-6 p-r-md p-b-md">
        <p class="text-black p-b-md">Button Handle - Custom Labels</p>
        <ux-slider [value]="slider1.value" [options]="slider1.options"></ux-slider>
    </div>
</div>

import { Component } from '@angular/core';
import { SliderValue, SliderOptions, ColorService, SliderStyle, SliderCalloutTrigger, SliderSize, SliderSnap, SliderType } from 'ux-aspects';

@Component({
selector: 'app',
templateUrl: './src/app.component.html'
})
export class AppComponent {

slider1: SliderExample;

lowerValue: number = 25;
upperValue: number = 75;

constructor(colorService: ColorService) {

    this.slider1 = {
        value: 50,
        options: {
            track: {
                ticks: {
                    major: {
                        steps: [0, 50, 100],
                        labels: true,
                        formatter: (value) => {
                            if (value === 0) {
                                return 'Minimum';
                            }
                            if (value === 50) {
                                return 'Default';
                            }
                            if (value === 100) {
                                return 'Maximum';
                            }
                        }
                    },
                    minor: {
                        show: false
                    }
                }
            }
        }
    };
}

interface SliderExample {
  value: number | SliderValue;
  options: SliderOptions;
}