javascript - 如何让父事件在点击子元素时不触发，但不阻止子元素事件

Question

在阅读了一些类似 this one 的帖子后，我正在尝试发现一种能够单击父 div 以隐藏自身，但在单击搜索框或“单击事件 2”文本时不隐藏的方法。

我已经使用 onclick 停止传播来防止 div 在单击输入框时隐藏，但是如果我对“单击事件 2”执行相同的操作，这会阻止 div 隐藏但也会阻止其他事件从发生。

总结一下:
1. 点击第一个'event 2'文本应该只是改变蓝色和红色之间的背景颜色，而不是隐藏浅绿色的div。
2. 单击第二个“事件 2”文本应显示警告框但不会隐藏粉红色父 div

如何实现这些目标？经过recent question ，我尝试将“preventPropagation”等添加到不同的元素和其他一些尝试，但无济于事。

我对 JS 比较陌生，所以任何解释都会很有帮助。谢谢。

function doThis() {
  var el = document.querySelector('#test1');

  if (el.style.display === 'flex') {
      el.style.display = 'none';
      } else {
        el.style.display = 'flex';
      }
}


function andThis() {
  var x = document.querySelector('.test2');
   if (x.style.background === 'red') {
      x.style.background = 'blue';
      } else {
        x.style.background = 'red';
      }
}





function doThisTwo() {
  var re = document.querySelector('#test3');

  if (re.style.display === 'flex') {
      re.style.display = 'none';
      } else {
        re.style.display = 'flex';
      }
}


function andThisTwo() {
  alert('hi');
}

#test1 {
  background: lightgreen;
  display: flex;
}
.test2 {
  background: red;
}
#test3 {background: pink}

<button onclick='doThis()'>click me</button>

<div id='test1' onclick='doThis()'>
  text <input onclick='event.stopPropagation()' type="text">
  <span class='test2' onclick='andThis()'>click for event 2</span>
</div>

<br><br>
<button onclick='doThisTwo()'>click me too</button>

<div id='test3' onclick='doThisTwo()'>
  text <input onclick='event.stopPropagation()' type="text">
  <span class='test4' onclick='andThisTwo()'>click for event 2</span>
</div>

Answer 1

如果您将 event 作为隐藏函数的参数 - 比如 doThis(event) - 您可以在函数中评估 event.target(用户实际点击的内容)。

因此，如果您单击的对象的类 === event2 按钮类 - 不要运行该函数。