jquery - 点击外部div触发内部 anchor 的点击事件是无限循环吗？

Question

我正在尝试单击外部元素并希望触发子元素的单击事件以查看父子单击事件关系。这是我的代码:-

  <div id="id1">DIV1
    <a href="#" id="id2">DIV2</a>
  </div>
  <script type="text/javascript">
    $(document).off('click', 'a#id2');
    $(document).on('click', 'a#id2', function(){
        alert('div2 clicked');
    });

    $(document).off('click', 'div#id1');
    $(document).on('click', 'div#id1', function(){
        alert($('div#id1').find('a').attr('id'));
        $('div#id1').find('a').trigger('click');
    });
    </script>

但是它正在无限循环中。 你能帮我解决这个问题吗？

提前致谢。

Answer 1

这个无限循环是由于事件冒泡造成的 - 您可以使用event.stopPropagation()停止事件冒泡。

$(document).off('click', 'a#id2');
    $(document).on('click', 'a#id2', function(event){
        alert('div2 clicked');
         event.stopPropagation(); // STOP EVENT BUBBLING
    });

    $(document).off('click', 'div#id1');
    $(document).on('click', 'div#id1', function(event){
        alert($('div#id1').find('a').attr('id'));
        $('div#id1').find('a').trigger('click');
      //  event.stopPropagation();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="id1">DIV1
    <a href="#" id="id2">DIV2</a>
  </div>