所以我想知道如何停止外部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>





链接-https://jsfiddle.net/t29ffzan/35/

最佳答案

首先,您需要在函数调用中捕获事件:
function(event) {}
接下来,在函数内调用函数stopPropagation,如下所示:

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


docs

10-05 20:55
查看更多