dispatchEvent导致页面重新加载

Question

I have been working with some modal code demonstrated at CodePen . Nice Material design style modals but as demonstrated, to activate, they essentially require a click on an <a> tag which has a class of modal__trigger . In the demo page, they are restyled as buttons.

I want to programmatically trigger a modal and so I have created the following code. The first line is the trigger. The remainder is the modal.

 <a href="" id="coordmodal-trigger" data-modal="#coord-modal" class="modal__trigger"></a> <div id="coord-modal" class="modal modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h4>Location</h4> <p id="coordinates">-28.8050, 149.9483</p> <!-- modal close button --> <a id="coordmodal-close" href="" class="modal__close"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg> </a> </div> </div> </div> 

Loading this in a page, I can see the trigger <a> . When I click on it, the modal appears with it's content - all good.

However, from the console, simulating a click, when I type the following:

var foo = document.getElementById('coordmodal-trigger'); foo.dispatchEvent(new Event('click'));

the modal appears without content and then the page reloads. I'm puzzled as to why this is occurring given that I am simply programatically producing a click event. Which should be the same as clicking on the link, should it not?

Answer 1

Which should be the same as clicking on the link, should it not

No, events programmatically created have the property cancelable defaulting to false . This means calling preventDefault() does not stop the default action. And since you are clicking on an anchor you need to prevent the default navigation action.

You need to pass in an EventInit dictionary with the cancelable property set to true

new Event('click',{cancelable:true});

This will allow preventDefault() to stop the default action

Demo

 var link = document.querySelector("a"); var btn = document.querySelector("#second"); var btn2 = document.querySelector("#third"); link.addEventListener("click",function(e){ e.preventDefault(); if(e.cancelable) document.body.insertAdjacentHTML('beforeend','<br>Event canceled<br>'); }); btn.addEventListener("click",function(){ var evt = new Event("click",{cancelable:true}); link.dispatchEvent(evt); }); btn2.addEventListener("click",function(){ var evt = new Event("click"); link.dispatchEvent(evt); }); 

 <a href="http://www.stackoverflow.com">Click First</a><br> <button id="second">Click Second (simulates click with cancelable set)</button><br> <button id="third">Click Third (simulates click without cancelable set)</button> 

As for the content not showing that is more likely due to the fact that since the page is navigating away the js is being unloaded and stops at some point before it has had a chance to load it.