你可以尝试使用一个 flag 变量和 return 从函数clickTr基于value，如下所示：

let isFocusEvent = false;

function focusInputFunction() {
  console.log("focus");
  isFocusEvent = true;
}

function clickTr() {
  if (isFocusEvent) {
    isFocusEvent = false;
    return;
  }
  console.log("tr");
}

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

event.stopPropagation();仅停止焦点事件向父级的传播。单击事件仍将被激发。在输入时将其添加到click事件。验证码：

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

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

function clickinput(event) {
  event.stopPropagation()
}

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

通过注册<tr>和<input>的共同祖先元素来委托"click"事件，然后让事件处理程序在<input>为:focused时不做任何事情。🞴 of <tr> and <input> and then have the event handler❉ do nothing should the <input> be :focused .
在下面的例子中，我们有一个<table>和两个<tbody>，其中第二个是隐藏的。每当用户单击<table>或它的一个子元素时，第二个<tbody>就会显示/隐藏。如果<input>为:focused on，则不会发生前面提到的行为。
参见事件委托。
🞴 在本例中，<table>注册到“click”事件，但<tr>也可以正常工作。
事件处理程序基本上是一个函数，当一个注册的事件被触发时调用。

示例中有详细注解

// Reference the common ancestor of <tr> and <input>
const ancestorNode = document.querySelector("table");

// Reference the <input>
const focalPoint = document.querySelector("input");

// Register the "click" event to <table>
ancestorNode.onclick = delegateClick;

// "click" event handler passes the (event) Object by default
function delegateClick(event) {

  // Reference the element user is focused on
  const focused = document.activeElement;
  
  // If the user IS NOT focused on <input>...
  if (focused !== focalPoint) {
  
    //...add/remove ".show" from <tbody class="hidden">
    document.querySelector(".hidden").classList.toggle("show");
  }
}

// A simple event hadler to show <input> is focused on
focalPoint.onfocus = e => console.log("Active element is <input>");

:root {
  font: 2ch/1.15 "Segoe UI"
}

table {
  table-layout: fixed;
  border-collapse: collapse;
}

tbody {
  float: left;
}

td {
  width: 5rem;
  height: 5rem;
  padding: 0.25rem;
  border: 1px solid black;
}

input {
  width: 4.5rem;
  font: inherit;
}

.hidden {
  width: 0;
  visibility: collapse;
  transition: width 1s;
}

.show {
  width: 10rem;
  visibility: visible;
}

.as-console-row::after { width: 0; font-size: 0; }
.as-console-row-code { width: 100%; word-break: break-word; }
.as-console-wrapper { min-height: 100%; max-width: 50%; margin-left: 50%; }

<table>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input placeholder="Enter text"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>

  <tbody class="hidden">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

在处理冒泡事件时，可以使用event.target检查事件的起源。

function focusInputFunction(event) {
  console.log("focus");
  //you won't need these lines for this, uncomment if you need them for something else
  //event.stopPropagation();
  //event.stopImmediatePropagation();
}

function clickTr(event) {
  if (event.target.id === "myInput") {
    return;
  }
  console.log("tr");
}

<table>
  <tr onclick="clickTr(event)">
    <td>
      <input id="myInput" onfocus="focusInputFunction(event)" type="text">
    </td>
    <td> other content in tr (to test onclick)</td>
  </tr>
</table>