javascript - 当 Bootstrap 模式关闭时，我如何知道单击了哪个按钮？

Question

这是我的模态 html 代码:

<div class="modal fade" id="delete-file-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-horizontal" method="post" id="delete_file_form">

                <div class="modal-body">
                    Are you sure you want to delete this file?  
                </div>  

                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-danger" name="in_confirm_insert" id="confirm-delete-button">Delete</button>
                    <button data-dismiss="modal" class="btn btn-default" name="in_confirm_insert" id="cancel-delete-button">Cancel</button>
                </div>

            </form>
        </div>
    </div>
</div>

这是我的 javascript 代码:

$('#delete-file-modal').on('hidden.bs.modal', function (e) {

    var delete_button = $(e.target).is("#confirm-delete-button");

    if(delete_button === true) {
        //delete file
        alert("file deleted.");
    } else {
        alert("delete failed.");
    };
});

我需要能够检查删除文件模式关闭时是否单击了删除按钮。我的 JavaScript 代码中是否还缺少其他内容？

Answer 1

选项 #1

在 hidden.bs.modal 事件监听器中，event.target 指的是隐藏的模态元素，不是被点击的元素触发事件。

如果您想确定哪个按钮触发了模式关闭，一种选择是将事件监听器添加到模式内的按钮元素。然后在按钮事件监听器内部，您可以监听父 #modal 元素上的 hidden.bs.modal 事件，以确定模式是否已关闭。由于 hidden.bs.modal 事件监听器位于按钮 click 事件监听器内部，您仍然可以引用触发 click 的元素> 事件。

Example Here

$('#delete-file-modal .modal-footer button').on('click', function(event) {
  var $button = $(event.target); // The clicked button

  $(this).closest('.modal').one('hidden.bs.modal', function() {
    // Fire if the button element 
    console.log('The button that closed the modal is: ', $button);
  });
});

还值得一提的是 .one() method每次附加时只会触发一次事件(这正是我们想要的)。否则，如果您使用 .on() 或 .click() 附加事件，则该事件可能会触发多次，因为每次 单击 事件监听器被触发。

---

选项 #2

根据相关Bootstrap documentation , show.bs.modal/shown.bs.modal 事件有一个 relatedTarget 属性附加到事件。

If caused by a click, the clicked element is available as the relatedTarget property of the event.

因此，您可以通过访问模态显示事件监听器内部的 event.relatedTarget 来确定触发模态打开事件的元素:

Example Here

$('#delete-file-modal').on('show.bs.modal', function (event) {
    console.log(event.relatedTarget);
});

请记住，relatedTarget 属性仅与模态显示事件相关联。如果它们具有与 hide.bs.modal/hidden.bs.modal 事件关联的属性，那就太好了。在撰写本文时，目前没有。

---

选项 #3

正如安德鲁指出的那样 in the comments在此答案下方，您还可以通过访问 document.activeElement 查看页面上的哪个元素具有焦点。 .

在下面的代码片段中，事件监听器附加到显示和隐藏事件的模态元素。触发事件时，会检查当前关注的元素是否具有 [data-toggle] 或 [data-dismiss] 属性(这意味着它确实触发了事件)。

Example Here

$('#delete-file-modal').on('hide.bs.modal show.bs.modal', function(event) {
  var $activeElement = $(document.activeElement);
  
  if ($activeElement.is('[data-toggle], [data-dismiss]')) {
    console.log($activeElement);
  }
});

如果您正在收听显示/隐藏事件，如上例所示，并且您想要区分这些事件，您可以检查 event.type:

Example Here

$('#delete-file-modal').on('hide.bs.modal show.bs.modal', function(event) {
  var $activeElement = $(document.activeElement);
  
  if ($activeElement.is('[data-toggle], [data-dismiss]')) {
    if (event.type === 'hide') {
      // Do something with the button that closed the modal
      console.log('The button that closed the modal is: ', $activeElement);
    }
    
    if (event.type === 'show') {
      // Do something with the button that opened the modal
      console.log('The button that opened the modal is: ', $activeElement);
    }
  }
});