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泛滥，因此您只需在document上注册点击监听器即可。事件对象将自动传递给您传递给addEventListener()的处理函数。在处理程序内部，您可以检查click事件是否在具有data-dismiss="GlideModal"的元素上引发：

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

之所以称为委托事件侦听器，是因为该侦听器未在您希望事件发生在其上的元素上注册，而是在DOM树的更高位置上注册。这样做的好处还在于，它适用于动态创建的元素（例如您的模态HTML）。

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

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

Answer 2

SerivceNow GlideModalForm扩展了GlideModal，它支持通过on方法进行事件注册。有2种受支持的事件可能适用于您想要的：

closeconfirm：由destroy方法调用，可用于中止破坏。
beforeclose：在窗口被隐藏后调用

我认为您可以仅使用closeconfirm事件来了解何时发生关闭，您不必担心中断操作，该操作会在用户单击按钮后立即触发，但会在窗口之前触发已移除。但是，值得注意的是，当用户单击“关闭”按钮（而不是X）时，这可能也会触发，该按钮可以选择通过模式首选项显示：myGlideModal.setPreference('sysparm_button_close', 'Close')

这是一个粗略的例子：

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

Answer 3

您可以如下创建onclick函数：

html：

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

JavaScript：

function myFunction() {
  alert("I am an alert box!");
}

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

3 个答案: