Question

我有一个模态对象，它具有各种函数作为其属性，但是当我单击打开模态时，我得到错误this.openModal不是函数。我已经尝试过调试，但只要它碰到我希望它运行的功能就会崩溃。我怀疑这可能是一个问题，这个＆＃39;绑定，但我不确定问题出在哪里。我的所有JS都在下面，一种功能链在另一种上，所以它更容易看到整个对象。

var modal = function () {

  // Modal Close Listeners
  this.closeModalListen = function(button) {
    var modalFooter = button.parentElement;
    var modalContent = modalFooter.parentElement;
    var modalElement = modalContent.parentElement;
    var backdrop = document.getElementById("modal-backdrop");
    this.closeModal(modalElement, backdrop);
  }

  // Open Modal
  this.openModal = function(button) {
    var button = button;
    var modal = button.getAttribute("data-modal");
    var modalElement = document.getElementById(modal);
    var backdrop = document.createElement('div');
    backdrop.id="modal-backdrop";
    backdrop.classList.add("modal-backdrop");
    document.body.appendChild(backdrop);
    var backdrop = document.getElementById("modal-backdrop");
    backdrop.className += " modal-open";
    modalElement.className += " modal-open";
  }

  // Close Modal
  this.closeModal = function(modalElement, backdrop) {
    modalElement.className = modalElement.className.replace(/\bmodal-open\b/, '');
    backdrop.className = backdrop.className.replace(/\bmodal-open\b/, '');
  }

  // Initialise Function
  this.init = function () {
    // Create Events for creating the modals
    if (document.addEventListener) {
        document.addEventListener("click", this.handleClick, false);
    }
    else if (document.attachEvent) {
        document.attachEvent("onclick", this.handleClick);
    }
  }

  // Handle Button Click
  this.handleClick = function(event) {
    var thisModal = this;
      event = event || window.event;
      event.target = event.target || event.srcElement;
      var element = event.target;
      while (element) {
          if (element.nodeName === "BUTTON" && /akela/.test(element.className)) {
              thisModal.openModal(element);
              break;
          } else if (element.nodeName === "BUTTON" && /close/.test(element.className)) {
              thisModal.closeModalListen(element);
              break;
          } else if (element.nodeName === "DIV" && /close/.test(element.className)) {
              thisModal.closeModalListen(element);
              break;
          }
          element = element.parentNode;
      }
  }
}

// Initalise Modal Engine
var akelaModel = new modal();
akelaModel.init();

我希望用纯粹的js解决这个问题，而不是jquery。

Answer 1

在将函数作为事件侦听器提供之前，您需要将该函数绑定到该对象：

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
...
...
}

/*I added for svg animation test*/
.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 5s linear alternate infinite;
}

@keyframes dash {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

否则它将与原始对象分离，并且没有预期的document.addEventListener("click", this.handleClick.bind(this), false); document.attachEvent("onclick", this.handleClick.bind(this));。

Answer 2

作为使用 bind 的替代方法，您可以移动：

var thisModal = this;

从 handleClick 方法到构造函数。

另外，它的惯例是给构造函数命名，以大写字母开头，这样就更容易看出它们是构造函数。

＆＃13;

var Modal = function () {

  var thisModal = this;

  // Open Modal
  this.openModal = function(button) {
    console.log('openModal called on ' + button.tagName);
  }

  // Initialise Function
  this.init = function () {
    // Create Events for creating the modals
    if (document.addEventListener) {
        document.addEventListener("click", this.handleClick, false);
    }
  }

  // Handle Button Click
  this.handleClick = function(event) {
    thisModal.openModal(event.target);
  }
}

// Initalise Modal Engine
var akelaModel = new Modal();
akelaModel.init();

＆＃13;

<div>Click <span>anywhere</span></div>

＆＃13;

＆＃39; this.function＆＃39;不是一个功能 - OO JS

2 个答案: