反应：防止点击滚动条传播

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

我的问题是，当我想通过点击滚动条滚动那些事件然后被解雇。

有没有办法让它，所以我可以防止滚动条上的鼠标事件传播？

Answer 1

似乎没有办法做到这一点; 无论如何，根本不知道。

但是，有一个半方面的解决scheme：

---

如果你点击滚动条，光标坐标等于你的元素的宽度，在这种情况下，你可以返回并阻止事件处理程序做它的东西。

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

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> 

Answer 2

然后把这个onMouseDown函数：

 function myFunction(event, element) { // Your code for div // ... if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } 

而你的div应该是这样的：

 <div onmousedown="myFunction(event, this);">Click me!</div>