Question

所以我想知道如何停止外部divs点击功能，并且只触发内部divs点击功能。但是，我想继续使用$（document）.on（'click'，selector）方法在我的应用程序中使用。我看到了一些答案，但没有一个与该方法一起使用。也许是我的疏忽？

$(document).ready(function() {
  $('.Name').text('A veery long namemmmmmmeehhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhheeeee');
  $(document).on("click", ".task", function() {

    alert("click");
  });
  $(document).on("click", ".Name", function() {

    alert("click");
  });
});

.one {
  height: 495px;
  flex-basis: 50%;
  max-width: 50%;
  min-width: 35%;
  position: relative;
  top: 20px;
  margin-right: 20px;
  margin-left: 10px;
  outline: solid red 1px;
}

.two {
  height: 210px;
  top: 20px;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  flex-basis: 50%;
  max-width: 50%;
  min-width: 15%;
  outline: solid red 1px;
}

.flex {
  height: 100%;
  width: 100%;
  display: flex;
}

.Box {
  cursor: pointer;
  width: 85%;
  padding-left: 8px;
}

.Name {
  margin: 0px;
  width: 85%;
  max-height: 25px;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Date {
  margin: 0px;
}

.task {
  width: 100%;
  height: 55px;
  cursor: pointer;
  background-color: white;
  border-top: solid #eaeaea 1px;
  border-bottom: solid #eaeaea 1px;
}

.Details {
  position: relative;
  top: 10%;
  display: inline-block;
  margin-left: 15px;
  width: 85%;
}

.three {
  height: 210px;
  top: 20px;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  flex-basis: 50%;
  max-width: 50%;
  min-width: 35%;
  outline: solid red 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex">

  <div class="one">
    one
    <div class="task task-container" data-type="yes">
      <div class="Details">
        <div class="Box">
          <p class="Name">A very long nameeeeeeeeeeeeeeeeeeeeeeeeeeeeemmmmmmmmmmmmmmmmee</p>
          <p class="Date">Due: 4/10/2018</p>
        </div>
      </div>
    </div>
  </div>
  <div class="two">
    two
  </div>
  <div class="three">
    three
    <div class="task task-container" data-type="yes">
      <div class="Details">
        <div class="Box">
          <p class="Name"></p>
          <p class="Date">Due: 4/10/2018</p>
        </div>
      </div>
    </div>
  </div>
</div>

LINK- https://jsfiddle.net/t29ffzan/35/

Answer 1

首先，您需要在函数调用中捕获事件： function(event) {} 接下来，您将函数调用到函数中的stopPropagation，如下所示：

$(document).on("click", ".Name", function(event) {
    event.stopPropagation()
    alert("click");
});

docs

Answer 2

在第二个事件处理程序中，执行以下操作：

$(document).on("click", ".Name", function(e) {
  e.stopPropagation();
  alert("click");
});

它将阻止事件冒泡，即也在父标记上调用。在这里查看moar信息：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation。

Answer 3

在内部元素的单击处理程序中，停止单击向外传播（冒泡）。

  $(document).on("click", ".task", function() {
    alert("click");
  });
  $(document).on("click", ".Name", function(e) {
    e.stopPropagation();
    alert("click");
  });

https://jsfiddle.net/t29ffzan/36/

点击功能，点击div内div的功能

3 个答案: