onMouseDown/onClick event on <div> inside <div>

Question

I am new to Javascript.

There is a big <div> as a bar with three <div> inside. One of those 3 divs contains an input, which is a field the user can type things in. The input normally let the user click on it and type.

However, the default behavior of the bar is to close when the user clicks out of it, which won't let the user type because it just closes. I try to use preventDefault() on the big <div> when the mouse goes down, so that the bar won't close, and that works. But then it does not let the user type inside the input, which was possible if I don't preventDefault() . Can anyone explain this behavior and how to handle these events?

<div onMouseDown={event => {
  event.preventDefault();
}}
>
  <div className="InputBox">
    <Input placeholder="default size" />
  </div>
</div>

Answer 1

我相信您必须在输入上使用“ stopPropagation”，因此点击不会传播到div。

<input onMouseDown="{event => { event.stopPropagation(); }}" placeholder... />