如何停止在 shadow dom 中傳播？

Question

我正在做一個擴展，有時會在頁面上創建一個影子 dom。 在這個 shadow dom 中，我有一個輸入，用戶可以在其中輸入內容，但在某些頁面上，例如 GitHub，如果用戶輸入“s”，它不會出現在我的輸入中，而是 GitHub 的搜索字段成為焦點。 我嘗試了 event.stopPropagation() 但沒有成功

我該如何防止這種行為？

Answer 1

一些站點會監聽keyup 、 keydown 、 keypress事件之一，因此您需要防止所有這些事件的傳播。 此外，一些站點在capture階段捕獲事件，因此您也需要考慮到這一點：

      <input
            onKeyDown={(e) => {
              e.stopPropagation()
            }}
            onKeyUp={(e) => {
              e.stopPropagation()
            }}
            onKeyPress={(e) => {
              e.stopPropagation()
            }}
            onKeyDownCapture={(e) => {
              e.stopPropagation()
            }}
            onKeyUpCapture={(e) => {
              e.stopPropagation()
            }}
            onKeyPressCapture={(e) => {
              e.stopPropagation()
            }}
            required={true}
            style={inputStyles}
            autoFocus={true}
            id="title"
            key="title"
            name="title"
            type="text"
            value={title}
            onChange={handleTitleChange}
            placeholder="Enter Title"
          />