javascript - react : Prevent click on scrollbar from propagating

Question

不幸的是，我有一个可滚动的 div，我也有与 div 上的 onMouseDown 关联的事件。

我的问题是，当我想通过单击滚动条进行滚动时，这些事件会被触发。

有没有办法阻止滚动条上的鼠标事件传播？

Answer 1

似乎没有办法做到这一点；反正我不知道。

但是，有一个半正经解决方案:

---

如果您单击滚动条，光标坐标等于元素的宽度，在这种情况下您可以返回并阻止事件处理程序执行它的操作。

在这里，我在逻辑中额外添加了 7 个像素，以说明 Chrome.v.58/MacOS 上滚动条的宽度。滚动条的宽度由浏览器决定，因此该值可能需要稍作调整。

class MyApp extends React.Component {

  divMouseDown(e) {
    if((e.clientX + 7) >= e.target.clientWidth) return;
    console.log("do stuff on click");
  }
  render() {
    return (
      <div id="my-div" onMouseDown={this.divMouseDown}>
        <p>foo</p>
        <p>bar</p>
        <p>baz</p>
      </div>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("myApp"));

#my-div {
  background: beige;
  height: 60px;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myApp"></div>