當輸入元素被禁用時，它不會被任何事件處理。

<input disabled />

如何實現任何元素(如跨度元素)？

我嘗試過使用指針事件:無& quot但它只能阻止點擊事件。onKeyDown等其他事件仍然可以調用。

這里有一個例子:

import * as React from "react";

export default function UnstyledSwitches() {
  return (
    <div>
      <span tabIndex={0} onKeyDown={() => console.log("clicked")}>
        test
      </span>
    </div>
  );
}

https://codesandbox.io/s/base-cra-typescript-forked-43708i?文件=/src/App.tsx

將焦點放在span with tab上，然后單擊空格鍵。將調用提供給onKeyDown props的函數。我不想調用這個函數。

一種解決方案是將disabled屬性添加到元素中，然后使用javascript將eventListeners限制為未禁用的元素。

例如:

在html中:

<span disabled>Disabled</span>
 <span>Open to events</span>

在js中:

document.querySelector('span:not([disabled=""])').addEventListener("event", handler);

但是，如果動態地禁用/啟用元素，您需要在元素狀態的每次變化之后添加eventListeners。

pointerEvents和tabIndex

這個問題問的是如何在一個span上阻止鍵盤輸入。但是，問題中包含的代碼為元素的tabIndex賦值。設置tabIndex(或contentEditable)屬性允許元素接收焦點和鍵盤事件。

從span中移除tabIndex會阻止焦點和鍵盤事件，但不會阻止鼠標事件。要防止鍵盤和鼠標事件，請將pointerEvents設置為& quot無& quot。tabIndex設置似乎對span沒有任何影響，但對輸入可能有影響。

OP指出，pointerEvents & quot無& quot不工作，但在代碼片段中它工作了。原因尚不清楚，但也許是由于不同的測試方法。

反應片段

該代碼片段包含幾個span元素，可以嘗試不同的配置。

const {useState} = React;

ReactDOM.render(
    
      <div>
      
      <span  
        onClick={(e) => log(e)}
        onKeyDown={(e) => log(e)}
        onFocus={(e) => log(e)}
      >
        tabIndex none
      </span>
      
      <span tabIndex={0} 
        onClick={(e) => log(e)}
        onKeyDown={(e) => log(e)}
        onFocus={(e) => log(e)}
      >
        tabIndex 0
      </span>
      
      <span 
        style={{pointerEvents: "none"}}
        onClick={(e) => log(e)}
        onKeyDown={(e) => log(e)}
        onFocus={(e) => log(e)}
      >
        pointer-events none
      </span>

    </div>
  
, document.getElementById("root"));


function log(e) { console.log(e.type) }

.pointer-events-none {
  pointer-events: none;
}

span {
  margin: 0.5rem;
  padding: 1rem;
  border: thin dotted blue;
  border-radius: 0.5rem;
}

span:focus {
  background-color: lightyellow;
}

body {
  font-family: sans-serif;
  margin: 1rem;
}
.as-console-wrapper { max-height: 100px !important; }

<p>
click on a span and then type some text using keyboard
</p>

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>