如何聚焦<tr>内的input时阻止触发<tr>的onclick函数？

你当前代码的问题在于：聚焦输入框时的点击动作会触发input的click事件，这个事件会冒泡到tr，从而执行tr的click回调——而你在focus事件里调用stopPropagation是无效的，因为focus事件本身不会冒泡，和触发tr的click不是同一个事件。

要实现需求，只需给input添加一个click事件处理函数，阻止该事件向上冒泡即可：

修改后的代码 #

JavaScript #

function focusInputFunction(event){
  console.log("focus");
}

function clickInputHandler(event){
  // 阻止click事件冒泡到父级tr
  event.stopPropagation();
}

function clickTr(){
  console.log("tr");
}

HTML #

<table>
  <tr onclick="clickTr()">
    <td>
      <input 
        id="myInput" 
        onfocus="focusInputFunction(event)" 
        onclick="clickInputHandler(event)" 
        type="text"
      >
    </td>
  </tr>
</table>

说明 #

• 点击输入框聚焦时，会先触发input的click事件，我们在clickInputHandler里阻止了事件冒泡，tr的clickTr就不会被执行；同时input的focus事件正常触发，输出"focus"。
• 如果通过键盘（比如Tab键）切换聚焦到输入框，本来就不会触发click事件，tr的click回调自然也不会执行，完全符合需求。

内容的提问来源于stack exchange，提问作者yavgz