Question

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

  <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()停止事件冒泡

＆＃13;

$(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();
    });

＆＃13;

<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>

＆＃13;

Answer 2

这是因为您的点击事件bubbles通过其父母。如果您不希望某个事件冒泡到被点击元素的父母，您需要阻止它发生。

http://javascript.info/tutorial/bubbling-and-capturing

https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

这些读物可以让你走上正轨。

Answer 3

＆＃13;

$(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();
    });

＆＃13;

<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>

＆＃13;

单击外部div时触发内部锚点击事件将进入无限循环？

3 个答案: