Javascript 如何注册到Close button元素的onClick事件

我正在serviceNow中使用UI操作调用GlildeModalForm弹出窗口。 该窗口有一个X（关闭按钮），当用户按下该按钮时，我需要捕捉该按钮。我没有任何关于按钮点击的反馈，需要捕捉它

我在ServiceNow Community上看到了一些示例，您可以注册到某个回调函数，但它只有在提交表单后才能使用

var modalForm = new GlideModalForm('Create User Member' , tableName );
modalForm.setOnloadCallback(formOnLoadCallback);
modalForm.setCompletionCallback(formAfterSubmitCallback);
modalForm.render();

function formOnLoadCallback() {
//Access GlideModal g_form to set field for the new record
var d_form = window.frames["dialog_frame"].g_form;
d_form.setValue('field', g_form.getValue('field'));
d_form.setValue('field', g_form.getValue('field'));
}

function formAfterSubmitCallback(action_verb, sys_id, table, displayValue) {
//Get the newly created record sys_id and then set e.g a value to the starting record
g_form.setValue('field', sys_id);
//Save the record
g_form.save();
}

通过使用浏览器的元素检查器，我可以看到关闭按钮定义如下：

<button data-dismiss="GlideModal" class="btn btn-icon close icon-cross" 
id="x_58872_needit_cascadesequence_closemodal">                 <span 
class="sr-only">Close</span>                
</button>

关闭

我需要从上面的脚本中找到这个按钮，然后注册到它的onClick，然后在onClick中，我甚至想简单地发送一个潜在丢失数据消息的警报

---

感谢您在这方面的帮助

您可以创建一个

onclick

函数，如下所示：

html:

---

由于单击事件会在DOM中冒泡，因此只需在

文档中注册一个单击侦听器即可。事件对象将自动传递给传递给
addEventListener（）
的处理程序函数。在处理程序内部，您可以检查是否在具有
数据dislose=“GlideModal”
的元素上引发了单击事件：

document.addEventListener（'click'，函数（e）{
如果（e.target.matches（'[data dislose=“GlideModal”]'））{
警报（“单击关闭模式”）；
}
})

这称为委托事件监听器，因为监听器未注册在您期望事件发生的元素上，而是注册在DOM树的更高层。这还有一个优点，即它适用于动态创建的元素（如假定的模式HTML）

编辑：我刚刚仔细检查了您显示的HTML。您可能需要检查单击是否源自按钮内部的
span
，而不是按钮本身：

document.addEventListener('click', function(e) {
  if (e.target.matches('[data-dismiss="GlideModal"] span') {
    alert ('Close modal clicked');
  }
})

SerivceNow
GlideModalForm
扩展了
GlideModal
，它通过
on
方法支持事件注册。有两个受支持的事件可以满足您的需要：


closeconfirm
：由
destroy
方法调用，可用于中止销毁
beforeclose
：在窗口已隐藏后调用

我认为您可以使用closeconfirm事件来了解关闭发生的时间，您不必关心是否中止该操作，并且它将在用户单击按钮后立即触发，但在删除窗口之前。
然而，值得注意的是，当用户单击“关闭”按钮（而不是X）时，也可能会触发此命令，该按钮可通过模式首选项显示：
myGlideModal.setPreference（'sysparm\u button\u Close'，'Close'）

下面是一个粗略的例子：

var myGlideModal = new GlideModal(...);
dd.on("beforeclose", function (){ /* do stuff, maybe return false to cancel */ });

感谢您的回复。由于我在DialogForm上没有创建组件的crontrol，因为它是创建我的Servicenow方法的，所以我应该将您提到的代码放在脚本的哪一部分？在我的Servicenow UI操作脚本中？只需将其放在页面加载期间执行的任何脚本中。如果我有按钮id=“submit\u button”onClick事件已经在调用我得到的Build表单中的一个方法，有没有办法仍然将事件处理程序添加到按钮id中？我如何更改您的示例以匹配按钮id？不要这样做，当作为委托侦听器实现时，它工作得更可靠。因此，这意味着我需要将该listner放在我的serviceNow Ui Acti中脚本正确吗？我不能这样做，因为我无法控制生成此按钮的HTML代码。Naks将尝试一下
document.addEventListener('click', function(e) {
  if (e.target.matches('[data-dismiss="GlideModal"] span') {
    alert ('Close modal clicked');
  }
})

var myGlideModal = new GlideModal(...);
dd.on("beforeclose", function (){ /* do stuff, maybe return false to cancel */ });