Question

我一直在使用CodePen演示的一些模态代码。 Nice Material设计样式模式，但如图所示，要激活，它们基本上需要点击<a>标签，其类别为modal__trigger。在演示页面中，它们被重新设置为按钮。

我想以编程方式触发模态，因此我创建了以下代码。第一行是触发器。其余部分是模态。

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

在页面中加载，我可以看到触发器<a>。当我点击它时，模态会显示它的内容 - 一切都很好。

但是，当我输入以下内容时，从控制台模拟点击：

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

模式显示没有内容，然后页面重新加载。考虑到我只是以编程方式生成点击事件，我很困惑为什么会发生这种情况。这应该与点击链接相同，不是吗？

Answer 1

如果不是
，则应该与点击链接相同

不，以编程方式创建的事件具有属性cancelable defaulting to false。这意味着调用preventDefault()不会停止默认操作。由于您点击了锚点，因此需要阻止默认导航操作。

您需要传入一个EventInit字典，并将cancelable属性设置为true

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

这将允许preventDefault()停止默认操作

演示

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>

至于未显示的内容更可能是由于页面正在导航，因此js正在卸载并在有机会加载之前停止。

dispatchEvent导致页面重新加载

1 个答案: