如何在单击父项时不激发其子项？（香草javascript）_Javascript_Dom Events

如何在单击父项时不激发其子项？（香草javascript）

javascript

如何在单击父项时不激发其子项？（香草javascript）,javascript,dom-events,Javascript,Dom Events,[最终编辑：我觉得必须回应，因为我主要是通过你们从这篇文章中学到了很多东西，我花了更多的时间理解CSS..但最后，我真的不知道如何让它工作..除了真的破坏html的基本结构..这是我不想做的.但我做了…出于任何原因家长>*{color:black}在我单击child时不起作用这是我所做的，但如果你现在知道我想做什么，请看看你是否能用真实的答案来纠正我，因为我觉得这不可能是黑客让它继续下去 CSS JS HTML __________最终编辑结束___________ 因此，我只想在单击父项时对

[最终编辑：我觉得必须回应，因为我主要是通过你们从这篇文章中学到了很多东西，我花了更多的时间理解CSS..但最后，我真的不知道如何让它工作..除了真的破坏html的基本结构..这是我不想做的.但我做了…出于任何原因家长>*{color:black}在我单击child时不起作用

这是我所做的，但如果你现在知道我想做什么，请看看你是否能用真实的答案来纠正我，因为我觉得这不可能是黑客让它继续下去

CSS

HTML

__________最终编辑结束___________

因此，我只想在单击父项时对父项激发。在下面的代码中，它对父项+其所有子项激发。我如何防止这种情况发生？我在单击之前和之后都尝试w/stop/prevent，以查看我是否运气好

请告知

当点击parent时，只有parent会显示为红色，而不是红色是孩子们。单击任何子项时，父项或任何其他子项都不应为红色没有一个已在工作的项目。

有几种方法可以实现此目的-一种方法是检查用户单击操作的事件对象上currentTarget的id属性：

const div1=document.createElement'div'； div1.className='foo'；让mainId=document.getElementById'main'；让parentId=document.getElementById'parent'； parentId.addEventListener“单击”，函数E{ /*检查currentTarget元素的id以查看它是否是父元素*/ 如果e.currentTarget.id==='parent'{ /*…如果是的话，判红色班*/ e、 target.className=红色； }否则{ /*…否则，停止事件传播和行为*/ e、停止传播； e、防止违约； } }，假；瑞德先生{ 背景：红色； } 母公司{ 填充：1rem； } 孩子1，孩子2，孩子3{ 背景：黄色； } 主要的父母亲孩子1 孩子2 孩子3

您可以在处理程序内部检查触发目标事件的元素是否是处理程序绑定到的元素：

您需要在单击子项时停止传播

<html>

  <head></head>

  <body>
    <div id="main">MAIN
      <div id="parent">parent
        <div id="child1">child1</div>
        <div id="child2">child2</div>
        <div id="child3">child3</div>
      </div>
    </div>
    <script>
      (function() {
        let parent = document.getElementById('parent');
        parent.addEventListener('click', function(e) {
          console.log('parent clicked');
        }, false);
        const children = document.querySelectorAll('#parent>div');
        children.forEach(child => {
          child.addEventListener('click', function(e) {
            console.log('child clicked');
            e.stopPropagation();
          })
        })
      })()

    </script>
  </body>

</html>

当点击parent时，只有parent会显示为红色，而不是children。这里的问题是您的CSS样式应用于子级。CSS代表级联样式表，其中级联方式应用于子级

单击“父项”后，您将得到以下结果

瑞德先生{ 颜色：红色； } 主要的父母亲孩子1 孩子2 孩子3

可能重复我已经澄清这是一个普通的javascript问题我读到的所有评论都发生了什么事？它都会发生：。单击任何子项，颜色不会改变。单击父项，颜色会改变。如果这不符合你的要求，那么你必须更好地解释你的问题。立即澄清我的问题。ad添加到主要部分，但这里是：-当单击父级时，只有父级应显示为红色。而不是它的子级。-当单击任何子级时，没有父级应显示为红色，也没有任何其他已运行的未单击子级。子级未显示类，您可以检查DOM。但是，例如，文本颜色适用于所有文本一个元素。那不是JavaScript而是CSS问题。怎么可能是CSS？我的CSS只包含这个。绿色{color:green；}。红色{color:red；}div{font size:100px；}好的，我明白你的意思了。然而，当我通过javascript实现这一点时，孩子们仍然会继承。我在这里学到了很多东西。我现在继续看这个。伙计们。感谢那些奇妙的观点，它们真正指出了我在CSST中完全缺乏理解。这篇编辑过的文章正是我所需要的：当点击家长时，只有家长应该得到clas它是红色的。而不是它的子项。单击任何子项时，不应将任何父项或任何其他已运行的未单击的子项设置为红色。

;(function(){

    let parentId = document.getElementById('parent');

    parentId.addEventListener('click', function(e){
        if (e.target.id === 'parent') {
            e.target.className = "red";
        } else {
            e.target.setAttribute("id", "alterChild");
        }
    },false);
})(

<div id="main">MAIN
    <div id="parent">parent
        <div id="child1">child1</div>
        <div id="child2">child2</div>
        <div id="child3">child3</div>
    </div>
</div

        <div id="main">MAIN
            <div id="parent">parent
                <div id="child1">child1</div>
                <div id="child2">child2</div>
                <div id="child3">child3</div>
            </div>
        </div>

      ;(function(){

        let parentId = document.getElementById('parent');

        parentId.addEventListener('click', function(e){
            e.stopPropagation();
            e.preventDefault();
            e.target.className = "red";
            e.stopPropagation();
            e.preventDefault();

        },false);
    })()

parentId.addEventListener('click', function(e){
  if (e.target === this) {
    e.target.className = "red";
  }
}, false);

<html>

  <head></head>

  <body>
    <div id="main">MAIN
      <div id="parent">parent
        <div id="child1">child1</div>
        <div id="child2">child2</div>
        <div id="child3">child3</div>
      </div>
    </div>
    <script>
      (function() {
        let parent = document.getElementById('parent');
        parent.addEventListener('click', function(e) {
          console.log('parent clicked');
        }, false);
        const children = document.querySelectorAll('#parent>div');
        children.forEach(child => {
          child.addEventListener('click', function(e) {
            console.log('child clicked');
            e.stopPropagation();
          })
        })
      })()

    </script>
  </body>

</html>