Pointers 当指针事件被Firefox中的另一个元素捕获时，单击DIV上的事件触发

我有以下几把小提琴：

类SliderAppComponent扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
按钮切换：错误
}
点击此按钮=（e）=>{
这是我的国家({
…这个州，
Buttontogle:！this.state.Buttontogle
});
};
this.isPointerDown=false；
this.onPointerDown=（e）=>{
const currentTarget=e.currentTarget；
currentTarget.setPointerCapture（即指针ID）；
this.isPointerDown=true；
};
this.onPointerMove=（e）=>{
如果（！this.isPointerDown）返回；
const currentTarget=e.currentTarget；
currentTarget.style.transform=`translate（${e.clientX-70}px）`；
};
this.onPointerUp=（e）=>{
const currentTarget=e.currentTarget；
this.isPointerDown=false；
currentTarget.releasePointerCapture（即指针ID）；
};
}
render（）{
返回(
滑动我
带有单击事件的按钮！
有点击事件的div！
)
}
}

它显示一个“slide me”div，当拖动该div并单击两个元素时会滑动：一个按钮和一个div

在Chrome中，当您单击“滑动我”时，将鼠标拖动到2个单击元素上并释放：什么都没有发生✔.

在Firefox中执行相同操作时，不会单击clickable按钮，但是clickable div会单击❌!

这是Firefox中的一个bug吗

---

示例说明：

“slide me”div捕获指针向下时的指针事件，并在指针向上时再次释放捕获。这两个可点击的元素只有一个普通的“onClick”监听器，可以改变背景颜色

一些文献：

我能找到的唯一参考是关于W3C指针事件的github问题：。说

我们讨论了这个问题，并一致同意继续向pointerdown和pointerup目标的第一个共同祖先发送click

在我的示例中，这只会触发对app元素的单击。这在Chrome中没有，但在Firefox中它会触发对祖先和可点击div的点击

class SliderAppComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      buttonToggle: false
    }

    this.clicked = (e) => {
      this.setState({
        ...this.state,
        buttonToggle: !this.state.buttonToggle
      });
    };

    this.isPointerDown = false;
    this.onPointerDown = (e) => {
        const currentTarget = e.currentTarget;
        currentTarget.setPointerCapture(e.pointerId);
        this.isPointerDown = true;
    };

    this.onPointerMove = (e) => {
    if (!this.isPointerDown) return;
        const currentTarget = e.currentTarget;
        currentTarget.style.transform = `translate(${e.clientX - 70}px)`;
    };

    this.onPointerUp = (e) => {
        const currentTarget = e.currentTarget;
        this.isPointerDown = false;
        currentTarget.releasePointerCapture(e.pointerId);
    };
  }

  render() {
    return (
      <React.Fragment>
        <div className="sliderContainer">
          <div className="slider"
             onPointerDown={this.onPointerDown}
             onPointerMove={this.onPointerMove}
             onPointerUp={this.onPointerUp}
             onPointerCancel={this.onPointerUp}>
             SLIDE ME
        </div>
        </div>

        <button
          style={{backgroundColor: this.state.buttonToggle ? "#00feb0" : "#00b0fe"}}
          onClick={this.clicked}>
        A button with a click event!
        </button>

        <div
          className="fake-button"
          style={{backgroundColor: this.state.buttonToggle ? "#00feb0" : "#00b0fe"}}
          onClick={this.clicked}>
        A div with a click event!
        </div>
      </React.Fragment>
    )
  }
}