alertstoppropagation

onMouseLeave trigger alert twice even with stopPropagation


$('.pool').on('mouseleave', function (e) {                
            var el = $(this).find('.pool-row').find('input[type=submit]');

            if (el.length)
                alert('bla bla bla');

            e.stopImmediatePropagation();
            e.stopPropagation();
            return;
        });

The alert is triggering twice on mouseleave even with stopPropagation or preventDefault and "return;".

[SOLVED] The second alert was being triggered because there was another mouseleave event on a parent element, and the alert() triggered a 'mouseleave'.


Solution

  • I have made some quick modifications on your script, and it seems that it does not trigger the alert twice!

    $('.pool').on('mouseleave', function (e) {
      e.stopPropagation()
      var el = $(this).find('input[type="submit"]')
    
      if (el.length)
          alert('bla bla bla')
    })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="pool">
      <p>This is a pool</p>
      
      <input type="submit">
    </div>