我有一个可滚动的div,不幸的是我还把事件与div的onMouseDown关联了起来。
我的问题是当我想通过单击滚动条来滚动时,那些事件就被触发了。
有没有办法防止滚动条上的鼠标事件继续传播?
我有一个可滚动的div,不幸的是我还把事件与div的onMouseDown关联了起来。
我的问题是当我想通过单击滚动条来滚动时,那些事件就被触发了。
有没有办法防止滚动条上的鼠标事件继续传播?
目前我不知道有什么方法可以做到这一点。
然而,有一个还算不错的解决方案:
如果你点击滚动条,光标坐标就等于你的元素宽度,这时你可以返回并阻止事件处理程序执行。
在这里,我增加了额外的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>
document.onmousedown = function(e){
if(e.target.id != 'scroll'){
console.log('mousedown');
}
}
#outside {
position: relative;
width: 300px;
height: 200px;
background-color: green;
}
#scroll {
position: relative;
top: 10px;
left: 10px;
background-color: red;
width: 280px;
height: 100px;
overflow-y: scroll;
}
<div id='outside'>
<div id='scroll'>
<div id='container'>
foo<br>
bar<br>
eee<br>
foo<br>
bar<br>
eee<br>
foo<br>
bar<br>
eee<br>
</div>
</div>
</div>
function myFunction(event, element) {
// Your code for div
// ...
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
<div onmousedown="myFunction(event, this);">Click me!</div>