按下按钮会导致页面重新加载而不是运行必要的代码？ [复制]

Question

我的网站中有一个设置页面，用户编辑他的个人资料，然后点击更新按钮，当正常工作时，如在 chrome 浏览器上，将在 updateProfileData 函数中运行某些代码。但是在Firefox浏览器中，只要我按下更新按钮，页面就会重新加载。

我怎样才能防止这种情况发生，而是让我想要的代码像在 chrome 浏览器中一样运行？

$('#update').on('click', event => {
  updateProfileData();
})

function updateProfileData() {
  //none of this will run because the page will instead reload
}

function pickFile() {
  fileButton.click()
}

function pickFile2() {
  fileButton2.click()
}

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

html, body {
  /* bottom: 0px;
  top: 0px; */
  width: 100%;
  height: 100%;
  margin:0px;

  font: Arial;
  font-family: sans-serif;
  font-weight:medium;

  text-align: center;

  /* bellow is to prevent all highlighting on the website. */
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
}

/* #mp3Picker {
  color: grey;
} */

/* .middleSignUpDiv .container input {
  background-color: #F5F3F4;
  color: black;

  display: block;
  width: 390px;
  height: 125px;

  margin-left: auto;
  margin-right: auto;
  margin-top: 27px;
  margin-bottom: 17px;

  border-radius: 21px;
  border: none;

  padding-left: 15px;
  font-size: 0.95em;
  outline:none;

  border: solid transparent 2px;
} */

.justify {
  /* background-color: lightblue; */
  margin-top: 5px;
  display: flex;
  justify-content: center;
}

.soundscapeCaption:focus {
  border: solid #E2E2E2 2px;
}

.soundscapeCaption {
  /* margin-left: auto;
  margin-right: auto; */

  display: block;
  margin: 1px;
  padding: 1px;
  padding-left: 20px;
  padding-top: 20px;
  width: 390px;
  height: 115px;
  resize: none;
  background-color: #F5F3F4;
  border-radius: 21px;
  outline: none;
  font-size: 15px;
  border: solid transparent 2px;
}

.imgcontainer {
  display: block;
  position: relative;
  text-align: center;
}


input[type=file] {
  display:none;
}

.imgcontainer img {
  /* display: block; */
  /* vertical-align: middle; */
  object-fit: cover;
}

.middleSignUpDiv input:focus{
  border: solid #E2E2E2 2px;
  /* background-color: #B6B5B5; */
}

.middleSignUpDiv ::placeholder {
  font: Arial;
  font-family: sans-serif;
  /* font-size: 15px; */
  font-weight:medium;
  color: #B6B5B5;
}

/* input[type=text] {
  background-color: #F5F3F4;
  color: #B6B5B5;
} */

button {
  width: 215px;
  height: 55px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;

  font: Arial;
  font-family: sans-serif;
  font-size: 19px;
  font-weight:600;
  color: white;
  background-color: #4152F1;
  border-radius: 7px;
  border: none;
  outline:none;
  cursor: pointer;
}

button:active{
background: blue;
}
button:visited {
   color: #4152F1;
}

/* .disclaimer {
  font: Arial;
  font-family: sans-serif;
  font-size: 12px;
  font-weight:medium;
  color: #CECECE;
  width: 390px;
  margin-left: auto;
  margin-right: auto;
}


.disclaimer em {
  color: #B4B4B4;
  cursor: pointer;
  font: Arial;
  font-family: sans-serif;
  font-size: 12px;
  font-weight:medium;
  font-style: normal
} */

/* Sign Up side */
/* body {
  top: 0px;
  bottom: 0px;

  float:left;
  display:inline-block;
  width: 100%;
  height: 100%;
  background-color: white;
  text-align: center;
} */

.descriptDiv {
  width: 100%;
  text-align: center;
  /* background-color: lightblue; */
}

.topSignUpDiv h1 {
  font: Arial;
  font-family: sans-serif;
  font-size: 40px;
  font-weight:600;
  /* text-align: center; */
  margin-top: 25px;
  margin-bottom: 0px;
}
/* .topSignUpDiv h3 {
  font: Arial;
  font-family: sans-serif;
  font-size: 19px;
  font-weight:400;
  color: white;
  background-color: #4152F1;
  border-radius: 7px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 10px;
  width: 355px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 55px;
} */

.disclaimer {
  margin-top: 50px;
  color: grey;
  font: Arial;
  font-family: sans-serif;
  font-size: 15px;
  font-weight:400;
  cursor: pointer;
}

#signout {
  font-weight: 500;
  color: grey;
  margin-top: 30px;
  cursor: pointer;
}

.cancelBtn {
  text-align: center;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  /* height: 50px; */
  font: Arial;
  font-family: sans-serif;
  font-size: 20px;
  font-weight:400;
  color: grey;
  cursor: pointer;
  border-radius: 5px;
}

/* .cancelBtn:hover {
} */

.cancelBtn:hover{
  background: #4152F1;
  color: white;
}

.profImg {
  margin-top: 20px;
  height: 150px;
  width: 150px;
  border-radius: 75px;
  border: solid #EFEFEF 1px;
  background-color: #EFEFEF;
  cursor: pointer;
}

.profImg:hover {
  border: solid #4152F1 1.2px;
}

.avatar {
  margin-top: 30px;
  height: 250px;
  width: 65%;
  border-radius: 20px;
  border: solid #EFEFEF 1px;
  background-color: #EFEFEF;
  cursor: pointer;
}

.avatar:hover {
  border: solid #4152F1 1.2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <div class="topSignUpDiv">
      <h1 class="">Edit profile/Settings</h1>
      <!-- <div class="descriptDiv"> -->
        <!-- <h3 class="">by creating your personal account</h3> -->
      <!-- </div> -->
    </div>
    <div class="middleSignUpDiv">

      <!-- <form class="js-form"> -->
        <!-- action="process.php" method="post"-->
        <div class="imgcontainer">
          <img onclick='pickFile()' src="images/defaultBanner.png" alt="Avatar" class="avatar" id="avatar">
          <input type="file" id="fileButton" value="upload"/>
        </div>

        <div class="profileImageContainer">
          <img onclick='pickFile2()' src="images/defaultProfImg.png" alt="Avatar" class="profImg" id="profImg">
          <input type="file" id="fileButton2" value="upload"/>
        </div>

        <!-- <div><label for="image_file">Please select image file</label></div> -->
        <!-- <div><input type="file" name="image_file" id="image_file" onchange="fileSelected();" /></div> -->

        <div class="container">
          <!-- <img onclick='pickFile()' src="images/defaultProfImg.png" alt="Avatar" class="profImg" id="profImg">
          <input type="file" id="fileButton2" value="upload"/> -->
          <!-- <div id="mp3PickerDiv"><input type="file" name="mp3File" id="mp3Picker" onchange="fileSelected();" />Select Soundscape (.MP3)</div> -->


          <!-- <input type="text" placeholder="Bio" name="soundscapeCaption" id="soundscapeCaption" required> -->
          <div class="justify">
            <textarea placeholder="Bio" class="soundscapeCaption" id="soundscapeCaption" rows="20" cols="50"></textarea>
          </div>

          <!-- <input type="text" placeholder="Email" name="emailInput" id="emailInput" required>
          <input type="password" placeholder="Password" name="psw" id="psw" required> -->


          <button id="update">Update</button>
          <!-- type="submit" -->

          <!-- <label>
            <input type="checkbox" checked="checked" name="remember"> Remember me
          </label> -->
        </div>

        <!-- <div class="container" style="background-color:#f1f1f1">
          <span class="googleSignIn"> fhsdakj </span>
        </div> -->
      <!-- </form> -->

      <div class="cancelBtn" id="cancelBtn">
        Cancel
      </div>

      <p id="signout">Sign out</p>

    </div>

Answer 1

似乎在 Firefox 按钮中默认提交。您可以将按钮类型设置为按钮或调用 event.preventDefault()。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Answer 2

event.preventDefault() 应该可以解决您的问题。所以你的代码应该是这样的：

$('#update').on('click', event => {
  // prevent default event
  event.preventDefault();
  updateProfileData();
})

function updateProfileData() {
  //none of this will run because the page will instead reload
}

function pickFile() {
  fileButton.click()
}

function pickFile2() {
  fileButton2.click()
}

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

如果可以取消，preventDefault()方法将取消该事件，这意味着属于该事件的默认动作不会发生。