Событие onMouseDown / onClick для <div>внутри <div>

Question

Я новичок в Javascript.

Существует большой <div> в виде бара с тремя <div> внутри.Один из этих трех элементов содержит вход, который представляет собой поле, в которое пользователь может вводить данные. Обычно вход позволяет пользователю щелкнуть по нему и ввести.

Однако по умолчанию панель закрывается, когда пользователь щелкает по ней, что не позволяет пользователю печатать, потому что она просто закрывается.Я пытаюсь использовать preventDefault() на большом <div>, когда мышь нажимает, чтобы панель не закрывалась, и это работает.Но тогда он не позволяет пользователю вводить данные внутри ввода, что было бы возможно, если бы я не preventDefault().Кто-нибудь может объяснить это поведение и как обрабатывать эти события?

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

Answer 1

Я полагаю, что вы должны использовать «stopPropagation» на входе, поэтому щелчок не распространяется на div.

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