javascript - 如何注册关闭按钮元素的 onClick 事件

Question

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

我在 ServiceNow 社区上看到过一些示例，您可以在其中注册某些回调函数，但只有在提交表单后才能使用它。

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 中，即使我想简单地发送潜在丢失数据消息的警报

感谢您的帮助

Answer 1

由于点击事件会在 DOM 中冒泡，因此您只需在文档上注册一个点击监听器即可。事件对象会自动传递给您传递给 addEventListener() 的处理函数。在处理程序内部，您可以检查是否在具有 data-dismiss="GlideModal" 的元素上引发了单击事件:

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

这称为委托(delegate)事件监听器，因为监听器没有注册在您期望事件发生的元素上，而是注册在 DOM 树的更高层上。这还有一个优点，即它适用于动态创建的元素(就像所谓的模态 HTML)。

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

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