一种解决方案是将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设置为“none”。tabIndex设置似乎对span没有任何影响，但对输入可能有影响。
OP注意到pointerEvents“none”不起作用，但在代码片段中它起作用。原因尚不清楚，但可能是由于不同的测试方法。

React代码片段

该代码片段包含几个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>