Question

我正在制作一个使用多个弹出窗口的网络应用。在弹出窗口中，我有自定义按钮（包含在<label>中）上传文件。当我点击按钮时，它会发射两次。我可以用e.preventDefault();解决两次触发问题，但很明显，它没有打开用户上传文件的窗口。

if (document.getElementById("addItemModal").style.display !== 'none'){

        $("#uploadImg").on('click', function(e) {
            e.preventDefault();
            console.log("I clicked upload image button.");
        });

        $("#uploadData").on('click',function() {
            console.log("I clicked upload data button.");
        });
}

所以似乎第一次点击是打开窗口上传文件的内容，第二次点击仍然是一个谜。这第二次点击可以从哪里来？我也试过了.unbind，但似乎没有任何效果。

编辑：添加代码 - 对于等待很抱歉，不得不拿出很多东西，但保持它的功能和我的问题是真的。

＆＃13;

var modal = document.getElementById('myModal');
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

// Click Add Icon to make pop up appear
$("#myBtn").click(function() {
  $("#myModal").fadeIn("fast");
  $("#addModal").fadeIn("fast");
});

// Click 'x'
$("#close1").click(function() {
  $("#myModal").fadeOut("fast");
});

if (document.getElementById("myModal").style.display != 'none') {

  console.log("Pls don't be running twice.");
  $("#upImgBtn").on('click', function(evt) {
    evt.preventDefault();
    console.log("I clicked upload image button.");
  });

  document.getElementById("upDataBtn").addEventListener('click', function() {
    console.log("I clicked upload data button.");
  });
}

＆＃13;

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
/* -- Edited Headers ----------------------- */

h4 {
  color: #333;
  display: inline-block;
  font-size: 1.6em;
  letter-spacing: 3px;
  font-weight: 500;
}
/* ---------------------------------------- */

.sideBar {
  position: relative;
  width: 18%;
  height: 90%;
  float: left;
  z-index: 100;
  border-right-style: solid;
  border-right-width: thin;
  border-right-color: #333;
  background-color: white;
}
/* -- Header & Location ------------- */

.headbar {
  height: 7%;
  background-color: ghostwhite;
  margin-bottom: 20px;
  box-shadow: 0 3px 10px 1px #888888;
}
#myBtn {
  float: right;
  position: relative;
  padding: 9px 3px 0 0;
  cursor: pointer;
  display: inline-block;
}
.uploadBtns {
  padding: 10px 15px 10px 15px;
  background-color: blue;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 1px 5px 0 #888;
}
#myModal {
  display: none;
 position: fixed;
  z-index: 1000000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
}
/* Modal Content */

#addModal {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 800px;
  border-radius: 15px;
  color: #404040;
}
/* -- Add Location Pop Up CSS ------ */

#addTable {
  width: 100%;
  height: 200px;
  background-color: transparent;
  border-collapse: collapse;
}
td {
  background-color: transparent;
  border-bottom: 1px solid #333;
}
tr {
  height: 100px;
}
.gridTitle {
  padding-left: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sideBar" class="sideBar">

  <div id="headbar" class="headbar">

    <h5> Home</h5>
    <div id="myBtn"><span id="addIcon">+</span>
    </div>

  </div>

</div>

<div id="myModal">

  <div id="addModal">

    <h4 id="header">ADD ITEM</h4>
    <span class="myClose" id="close1">×</span>

    <hr>

    <table id="addTable">

      <tr id="step1">
        <td class="gridTitle">UPLOAD</td>
        <td></td>
        <td colspan="2">
          <label class="btn btn-file uploadBtns" id="upImgBtn">
            Upload Image
            <input type="file" accept="image/*" style="display: none;" id="upImg">
          </label>

          <label class="btn btn-file uploadBtns" style="margin-left:120px;" id="upDataBtn">
            Upload Data File
            <input type="file" style="display: none;" id="upData">
          </label>
        </td>
      </tr>

    </table>


  </div>
</div>

＆＃13;

EDIT2：我还没有在HTML中包含两次脚本。

Answer 1

所有这一切都在发生，因为您要向标签添加事件。

以下是jsfiddle中的代码。

 document.getElementById("upData").addEventListener('click', function() {
    alert("I clicked upload data button.");
  });

您还可以控制哪个元素触发了事件。您可以将事件置于标签上并仅在事件来自标签时发出警报，但这不会阻止点击事件发生在输入按钮上。

document.getElementById("upDataBtn").addEventListener('click', function(event) {
       if( event.target.tagName === "LABEL" ) {
            alert("I clicked upload data button.");
        }       
});

它被称为冒泡的一次或两次因为输入元素是标签的一部分并且是一个联合因此如果标签是单击的话也接收了事件（不是冒泡，你不能做{{ 1}}）。

如果你做

event.stopPropagation()

这将为您提供两个标签名称

LABEL

INPUT

Answer 2

试试这个

      $(document).on('click',"#upImgBtn", function(e) {
        if (e.target !== this)
        return;
        console.log("I clicked upload image button.");
      });

      $(document).on('click','#upDataBtn', function(e) {
        if (e.target !== this)
        return;
        console.log("I clicked upload data button.");
      });

jQuery - 单击已注册两次

2 个答案: