Javascript - 不推荐使用事件 - 在页面上显示双倍

时间:2021-03-13 21:15:08

标签: javascript dom-events javascript-objects

我是 Javascript 新手,正在为项目创建电子邮件应用程序,我使用的是 Visual Studio Code。对于第 2 行,对于 event.stopImmediatePropagation,我看到“事件”被划掉,并且 VS 代码表示不推荐使用事件。我怎样才能以不同的方式写这个?

如果我去掉 event.stopImmediatePropagation,那么每封电子邮件都会在页面上翻倍。 任何帮助都非常感谢。我只需要每封电子邮件在页面上只显示一次。

function load_email() {

 event.stopImmediatePropagation();
  //keeping only the email-view and hiding the rest
  document.querySelector('#emails-view').style.display = 'none';
  document.querySelector('#compose-view').style.display = 'none';
  document.querySelector('#email-view').style.display = 'block';
  mail_view = document.querySelector('#email-view');

  var tar = event.target;
  console.log(tar.children);

  if (!(tar.tagName == 'P')) {
    tar = tar.parentElement;
  }

  var c = tar.children;
  var id = c[3].innerHTML;
  mail_view.innerHTML = '';

  //GET request to get everything we need about the email

  fetch(`/emails/${id}`)
    .then(response => response.json())
    .then(email => {

      //creating a div for each email in mailbox in which we will include sender, timestamp 
and subject 
      var p = document.createElement('p');

      //adding classes to that div, bootstrap stuff
      p.classList.add('page-header', 'jumbotron');

      //creating the needed elements for subject, sender, etc.
      const sub = document.createElement('h5');
      const recipients = document.createElement('h5');
      const sender = document.createElement('h5');
      const body = document.createElement('h6');
      const timestamp = document.createElement('h6');

      sub.innerHTML = `Subject: ${email['subject']}`;
      recipients.innerHTML = `To: ${email['recipients']}`; 
      sender.innerHTML = `From: ${email['sender']}`;
      body.innerHTML = email['body'];
      timestamp.innerHTML = email['timestamp'];

      //styling for timestamp
      timestamp.style.color = 'blue';

      //styling for body
      body.style.padding = '2rem';
      body.style.backgroundColor = 'lightgray';

      //adding the elements to the div we created
      p.appendChild(sub);
      p.appendChild(recipients);
      p.appendChild(sender);
      p.appendChild(timestamp);

      //adding the div and body to the main div
      mail_view.appendChild(p);
      mail_view.appendChild(body);

      //making 'read' = true to show the email has already been read
      if (email['read'] == false) {
        //making the read attribute true
        fetch(`/emails/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            read: true
          })
        })
      }

0 个答案:

没有答案