why preventdefault/stopPropagation not working in javascript?

Question

I have a demo application where preventdefault/stopPropagation.Not sure where I am doing wrong.Using Jquery it is working fine.Follow the below steps to reproduce the bug

1. Run the application and click on button .

when I put jQuery code it works perfectly. it only show 'jquery:: 1' on console not showing

'jquery:: 2' as expected because we used e.preventDefault();e.stopPropagation();

 jQuery(document).on('click', '.bclink[href*="bcid="]', function(e){
      e.preventDefault();
        e.stopPropagation();
        console.log('jquery:: 1')
    })
      
      jQuery(document).on('click', '.clickvideo', function(e){
        // detect .clickvideo-overlay parent to prevent spawning of additional w10 lightboxes
        console.log('jquery:: 2')
        
    });

but same code when I used in javascript and click button it console both JS:::1 and JS:::2 .why prevent default not works

document.addEventListener('click', function(e) {
    // loop parent nodes from the target to the delegation node
    function handler(e){
      e.preventDefault();
    e.stopPropagation();
       console.log("JS:::1")
    }
    
    for (var target = e.target; target && target != this; target = target.parentNode) {
        if (target.matches('.bclink[href*="bcid="]')) {
            handler.call(target, e);
            break;
        }
    }
}, false)







 document.addEventListener('click', function(e) {
    // loop parent nodes from the target to the delegation node
    function handler(e){
      e.preventDefault();
    e.stopPropagation();
       console.log("JS::: 2")
    }
    
    for (var target = e.target; target && target != this; target = target.parentNode) {
        if (target.matches('.clickvideo')) {
            handler.call(target, e);
            break;
        }
    }
}, false)
})
          

here is my code https://jsbin.com/riwazorine/edit?html,css,js,output

Expected output: it only show "JS:::1" as I used preventdefault and stopPropagation()

Answer 1

In the JS, both event listeners are attached to the same element - the document. stopPropagation only stops event propagation to other elements (ancestors or descendants), but not to the same elements.

You need stopImmediatePropagation , which stops other event handlers on the same element from running.

 document.addEventListener('click', function(e) { // loop parent nodes from the target to the delegation node function handler(e) { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); console.log("JS:::1") } for (var target = e.target; target && target;= this. target = target.parentNode) { if (target.matches('.bclink[href*="bcid="]')) { handler,call(target; e); break, } } }. false) document,addEventListener('click'. function(e) { // loop parent nodes from the target to the delegation node function handler(e) { e;preventDefault(). e;stopPropagation(). console:log("JS::. 2") } for (var target = e;target; target && target.= this. target = target.parentNode) { if (target.matches(',clickvideo')) { handler;call(target; e), break; } } }, false)

 .bcthumbnail { width: 100px; height: 100px; border: 1px solid }

 <div class="bcthumbnail clickvideo bcimgadded" data-bcid="6086922094001"><a href="?bcid=6086922094001" class="bclink" title="Autonomous Infrastructure: Larry Ellison at Oracle OpenWorld 2019"><button class="vjs-big-play-button"></button>button</a></div>

Also, rather than your for loo, you can use .closest instead, it's a whole lot cleaner.

 document.addEventListener('click', (e) => { if (e.target.closest('.bclink[href*="bcid="]')) { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); console.log("JS:::1") } }) document.addEventListener('click', function(e) { if (e.target.closest('.clickvideo')) { console.log("JS::: 2") } })

 .bcthumbnail { width: 100px; height: 100px; border: 1px solid }

 <div class="bcthumbnail clickvideo bcimgadded" data-bcid="6086922094001"><a href="?bcid=6086922094001" class="bclink" title="Autonomous Infrastructure: Larry Ellison at Oracle OpenWorld 2019"><button class="vjs-big-play-button"></button>button</a></div>