Question

在阅读了this one之类的几篇文章之后，我试图找到一种方法，该方法可以单击父div来隐藏自身，但在单击搜索框或“单击以获取事件2的文本。

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

总结一下：
1.单击第一个“事件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

如果将事件作为隐藏函数的参数（例如doThis（event）），则可以在函数中评估event.target（用户实际单击的内容）。

因此，如果您单击的事物的类=== event2按钮类，请不要运行该函数。

如何使父级事件在单击子元素时不会触发，但不会阻止子元素事件

1 个答案: