javascript - HTML5 对话框元素关闭按钮无法正常工作

Question

我在看这个问题post ，我无法将其应用于我的代码。

这让我感到困惑，因为我对保存按钮所做的事情与我对取消按钮所做的完全相同(至少，关于它关闭的部分)并且在单击取消时没有任何反应。

<dialog class="my-modal"> 
                <p>Add Cust</p>
                <label for="nameField">Name</label><input id=nameField><br>
                <label for="addressField">Address</label><input id=addressField><br>
                <label for="cityField">City</label><input id=cityField><br>
                <label for="stateField">State</label><input id=stateField size=2> &nbsp;
                <label for="zipField">Zip</label><input id=zipField><br>

                <br>
                <button onclick="closeAndSave()">Save</button>
                <button onclick="close()">cancel</button>
            </dialog>

function close(){
    const modal = document.querySelector('.my-modal');
    modal.close();
}

也试过:

<button class="btn btn-default" data-dismiss="my-modal" aria-label="Close">Cancel</button>

Answer 1

解决此问题的另一种方法是将行为绑定(bind)到脚本中的按钮，而不是使用内联“onclick”属性为按钮指定功能。

“内联 onclick 方法”可能会导致意外行为(这可能是您的问题的原因)。一个例子是，如果 close() 在您的应用程序全局范围内的其他地方被重新定义/重新分配，那么这将导致对话框的关闭按钮调用“错误的关闭函数”。

考虑修改您的 HTML 和脚本，以便将事件绑定(bind)委托(delegate)给您的脚本以便更好地控制，如下所示:

/* Obtain modal as before */
const modal = document.querySelector('.my-modal')

/* Select buttons from modal and bind click behavior */
modal.querySelector("button.cancel").addEventListener("click", () => {
  /* Call close method on modal to dismiss */
  modal.close();
});

modal.querySelector("button.save").addEventListener("click", () => {
  alert("save data");
  modal.close();
});

/* Added for snippet to prelaunch dialog */
modal.showModal();

<dialog class="my-modal">
  <p>Add Cust</p>
  <label for="nameField">Name</label><input id=nameField><br>
  <label for="addressField">Address</label><input id=addressField><br>
  <label for="cityField">City</label><input id=cityField><br>
  <label for="stateField">State</label><input id=stateField size=2> &nbsp;
  <label for="zipField">Zip</label><input id=zipField><br>
  <br>
  <!-- Replace onclick with classes to identify/access each button -->
  <button class="save">Save</button>
  <button class="cancel">cancel</button>
</dialog>

希望对您有所帮助!