使文本链接在可点击 DIV 中可点击

Question

我在父元素上有一个单击事件，在子元素上有一个单击事件。每次我单击子元素时，都会执行与父元素关联的单击。有没有一种简单的方法可以让我的子元素可点击？

<div class="main">
    <div>Some Content</div>
    <div>Some other Content</div>
    <div class="seeterms">See Terms & Conditions</div>
    ...
    <div class="terms">T&Cs</div>
</div>

$('.seeterms').on('click', function(){
$('html, body').scrollTop($(".terms").offset().top);
});

$('.main').on('click', function(){
    doSomething();
});

Answer 1

const parentElement = document.getElementById('parent');
        const childElement = document.getElementById('child');

        parentElement.addEventListener('click', () => {
            console.log('Parent element clicked');
        });

        childElement.addEventListener('click', (event) => {
            event.stopPropagation(); // This prevents the click event from reaching the parent element
            console.log('Child element clicked');
        });

#parent {
  width: 200px;
  height: 200px;
  background-color: lightgray;
}

#child  {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
        <div>Some Content</div>
    <div>Some other Content</div>
        <div id="child">
          <h1>See Terms & Conditions</h1>
         </div>
    </div>

使用这种类型的脚本使其工作。

谢谢。