时间戳

首页 > 解决方案 > 返回值到 DOM

javascript - 返回值到 DOM

问题描述

我正在寻找有关事件侦听器在 return 语句中返回值的指导。

我在网上找到了关于return语句的两条规则：

  1. 如果在函数体中使用 return 关键字，则将值返回（或发送）回调用函数的位置。
  2. 如果在事件处理程序中使用了 return 关键字，则会向浏览器返回（或发送）一个值。

我有以下 js 代码，用于应返回 true/false 的自定义确认模式。我希望它模仿浏览器的本机确认框。

在下面的 js 代码中，有一个包含事件处理程序的 switch 语句。事件处理程序应该运行该函数并返回 true，但我也不知道它返回到哪里或如何找到它。开发工具中是否有工具可以查看此值？

const dialog = {
   open (options) {
       options = Object.assign({}, {
           title: '',
           message: '',
           type: 'I',
           buttonGroup: 'okonly',
           okText: 'OK',
           cancelText: 'Cancel',
           yesText: 'Yes',
           npText: 'No',
           onok: function () {return true;},
           oncancel: function () {return false;},
           onyes: function () {return true;},
           onno: function () {return false;}
       }, options);
       
       const html = `
       <div id="dds-dialogoverlay" class="dds-dialogoverlay">
       <div id="dds-dialogbox" class="dds-dialogbox">
          <div class="dds-dialogbox__head">
            <span>Deployable Disbursing System (DDS) - ${options.title}</span>
            <button id="dds-dialogbox__close" class="dds-dialogbox__close">&times;</button>
          </div>
          <div class="dds-dialogbox__body">
             <div id="dds-dialogbox__body-left" class="dds-dialogbox__body-left"></div>
             <div id="dds-dialogbox__body-right" class="dds-dialogbox__body-right">${options.message}</div>
          </div>
          <div id="dds-dialogbox__footer" class="dds-dialogbox__footer">
             <div id="btn-groups">
                <div id="okonly-btn-group" class="btn-group">
                   <button id="okonly_ok-btn" class="t-button" type="button" value="ok">${options.okText}</button>
                </div>
                <div id="okcancel-btn-group" class="btn-group">
                   <button id="okcancel_ok-btn" class="t-button" type="button" value="ok">${options.okText}</button>
                   <button id="okcancel_cancel-btn" class="t-button" type="button" value="cancel">${options.cancelText}</button>
                </div>
                <div id="yesno-btn-group" class="btn-group">
                   <button id="yesno_yes-btn" class="t-button"  type="button" value="yes"${options.yesText}</button>
                   <button id="yesno_no-btn" class="t-button"  type="button" value="no">${options.noText}</button>
                </div>
                <div id="yesnocancel-btn-group" class="btn-group">
                   <button id="yesnocancel_yes-btn" class="t-button"  type="button" value="yes"${options.yesText}</button>
                   <button id="yesnocancel_no-btn" class="t-button"  type="button" value="no">${options.noText}</button>
                   <button id="yesnocancel_cancel-btn" class="t-button"  type="button" value="cancel">${options.cancelText}</button>
                </div>
             </div>
          </div>
       </div>
    </div>`;

       const template = document.createElement('template');
       template.innerHTML = html;

       // Elements
       const dialogOverlay = template.content.querySelector('#dds-dialogoverlay')
       const dialogbox = template.content.querySelector('#dds-dialogbox');
       const dialogbox__head = template.content.querySelector('#dds-dialogbox__head');
       const dialogbox__body = template.content.querySelector('#dds-dialogbox__body');
       const dialogbox__footer = template.content.querySelector('#dds-dialogbox__footer');
       const dialogbox__okonlyBtnGrp = template.content.querySelector('#okonly-btn-group');
       const dialogbox__okcancelBtnGrp = template.content.querySelector('#okcancel-btn-group');
       const dialogbox__yesnoBtnGrp = template.content.querySelector('#yesno-btn-group');
       const dialogbox__yesnocancelBtnGrp = template.content.querySelector('#yesnocancel-btn-group');
       const btnClose = template.content.querySelector('.dds-dialogbox__close');
       const btnOk = template.content.querySelector('#okonly_ok-btn');
       const btnOkCancel_ok = template.content.querySelector('#okcancel_ok-btn');
       const btnOkCancel_cancel = template.content.querySelector('#okcancel_cancel-btn');
       const btnYesNo_yes = template.content.querySelector('#yesno_yes-btn');
       const btnYesNo_no = template.content.querySelector('#yesno_no-btn');
       const btnYesNoCancel_yes = template.content.querySelector('#yesnocancel_yes-btn');
       const btnYesNoCancel_no = template.content.querySelector('#yesnocancel_no-btn');
       const btnYesNoCancel_cancel = template.content.querySelector('#yesnocancel_cancel-btn');

       var dialog_type_class;

       switch (options.type) {
          case 'I':
             dialog_type_class = 'dds-dialogbox--info';
             break;
          case 'E':
            dialog_type_class = 'dds-dialogbox--error';
             break;
          case 'W':
            dialog_type_class = 'dds-dialogbox--warning';
          case 'S':
            dialog_type_class = 'dds-dialogbox--success';
       }
       dialogOverlay.classList.add('dds-dialogoverlay--show');
       dialogbox.classList.add(dialog_type_class);

       switch (options.buttonGroup) {
          case 'okonly':
             dialogbox__okonlyBtnGrp.classList.add("btn-group--show");
             btnOk.addEventListener('click', () => {
             response = options.onok();
             this._close(dialogbox, dialogOverlay);
             console.log('response is ' + response);
             return response;
           });
             break;
          case 'okcancel':
             dialogbox__okcancelBtnGrp.classList.add("btn-group--show");
             btnOkCancel_ok.addEventListener('click', () => {
               response = options.onok();
               this._close(dialogbox, dialogOverlay, response);
               
             });
             btnOkCancel_cancel.addEventListener('click', () => {
               response = options.oncancel();
               this._close(dialogbox, dialogOverlay, response);
               
             });
             break;
          case 'yesno':
             dialogbox__yesnoBtnGrp.classList.add("btn-group--show");
             btnYesNoCancel_yes.addEventListener('click', () => {
               response = options.onyes();
               this._close(dialogbox, dialogOverlay, response);
               
             });
             btnYesNo_no.addEventListener('click', () => {
               response = options.onno();
               this._close(dialogbox, dialogOverlay, response);
               
             });
             break;
          case 'yesnocancel':
            dialogbox__yesnocancelBtnGrp.classList.add("btn-group--show");
            btnYesNoCancel_yes.addEventListener('click', () => {
               response = options.onyes();
               this._close(dialogbox, dialogOverlay, response);
               
             });
            btnYesNoCancel_no.addEventListener('click', () => {
               response = options.onno();
               this._close(dialogbox, dialogOverlay, response);
               
             });
            btnYesNoCancel_cancel.addEventListener('click', () => {
               response = options.oncancel();
               this._close(dialogbox, dialogOverlay, response);
               
             });
            }

       dialogOverlay.addEventListener('click', e => {
          if (e.target === dialogOverlay) {
               options.oncancel();
               this._close(dialogbox, dialogOverlay);
          }
       })
       dialogbox.addEventListener('click', e => {
           if (e.target === dialogbox) {
               options.oncancel();
               this._close(dialogbox, dialogOverlay);
           }
       });
       
       document.body.appendChild(template.content);
   },

   _close (dialogbox, dialogOverlay) {

      dialogbox.classList.remove(dialogbox.classList.item(1));
      dialogOverlay.classList.remove("dds-dialogoverlay--show");
      document.body.removeChild(dialogOverlay);
   }
};

function Dialogbox(dialog_type = 'I', dialog_title, dialog_mess, dialog_buttons = 'okonly') {
   dialog.open({
      title: dialog_title,
      message: dialog_mess,
      type: dialog_type,
      buttonGroup: dialog_buttons
   });
}

标签： javascripthtmldom

解决方案

EventListener 的回调不会向浏览器返回任何内容。如果您在事件处理程序中有 return 语句，它只会在那里停止执行事件处理程序。有关更多详细信息，您可以通过 URL：https ://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback

推荐阅读