React：防止滚动条上的点击事件传播

Question

我有一个可滚动的div，不幸的是我还把事件与div的onMouseDown关联了起来。

我的问题是当我想通过单击滚动条来滚动时，那些事件就被触发了。

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

- noisegrrrl

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>

- Chris

---

谢谢，我会尝试的！ - noisegrrrl

你可能需要添加一些像素来考虑滚动条的宽度。请注意，滚动条的宽度由浏览器确定，因此可能会略有不同。 - Chris

如果这个答案有帮助，请考虑给它点赞和/或将其标记为已接受，如果它解决了您的问题。 - Chris

它能够工作，但有时会阻止我在mousedown事件上的函数工作，即使我在div的中间点击。 - noisegrrrl

现在我已经成功地解决了它，我不得不将div的左坐标添加到宽度中，否则当进行比较时clientX总是更高。 - noisegrrrl

Answer 2

我曾经遇到过同样的问题。我有一个 div 元素，里面还有一个可滚动的 div。我希望外部和内部 div 的 onclick 事件都能触发，但不包括滚动条。

问题在于滚动条也会接收到 mousedown 事件。

解决办法是：在包含滚动条的 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。任何对滚动条的点击都会被停止，但其他所有内容都会触发该事件。希望这能帮到您。

- user3267727

Answer 3

然后将此代码放在您的 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>

- Blarzek

---

很遗憾，我不会。 (而且我认为你的意思是event.stopPropagation()) - noisegrrrl

此外，在React中，这不是调用事件的方式。 - Chris