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>

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>

Answer 3

我有同样的问题。我有一个div元素，其中有另一个可滚动的div。我希望onclick事件在div的内部和外部都触发，而不是在滚动条上触发。

问题在于滚动条也将鼠标按下。

防止鼠标向下滚动滚动条的一种干净方法是创建一个div，该div包含具有滚动条的div内的可滚动内容。然后，当目标是带有滚动条的div时，我们将禁用onmousedown函数。也许用一个例子更清楚：

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>

该解决方案行之有效，因为'scroll'div包含滚动条，但'container'div不包含（如果检查元素，您会非常清楚地看到它）。当我们单击滚动条时，mousedown事件的唯一直接目标是'scroll'div。滚动条上的所有单击都将停止，但是其他所有事件都会触发该事件。

希望这会有所帮助。

React：阻止点击滚动条进行传播

3 个答案: