Question

我有这样的元素

<div class="parent-component">
    <div class="form-group">
        <label for="my-input">Label</label>
        <input type="text" name="my-input" id="my-input" class="form-control">
    </div>
</div>

我已将jQuery on方法的点击监听器附加到父级，如下所示

$(document).on("click", ".parent-component", function() {
    // ...
})

我在.parent-component内点击事件监听器。但是，单击输入 - 或任何交互元素（链接，按钮，输入） - 它会激活。

如何防止点击.parent-component内的任何元素，以便我可以在其中包含无法点击的输入和链接？

Answer 1

这通常是理想的行为;点击一个子元素也是对其父元素和祖先元素的点击，就像你不能在你的房子里就不能进入你的房间一样。

但是，如果您想防止儿童/后代点击，您可以这样做：

$(document).on("click", ".parent-component", function(evt) {
    if (!$(evt.target).is('.parent-component')) return false;
    //beyond here, we can be sure the element was to the parent directly,
    //not any children/descendants
})

Answer 2

另一种选择，以便您可以在不同的地方使用，..

对于您不想传播事件的控件，您可以创建一个类并将其作为目标，并告诉他们不要传播事件..

如果您确实有一些控制措施可以传播您可以离开课程的事件，那么优势就是。

例如..

$(document).on("click", ".parent-component", function(e) {
  console.log('click');
});

$(document).on('click', '.no-propagate', function (e) { e.stopPropagation(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-component">
    <div class="form-group">
        <label class="no-propagate" for="my-input">Label</label>
        <input class="no-propagate" type="text" name="my-input" id="my-input" class="form-control">
        <span>This still sends clicks to parent</span>
    </div>
</div>

Answer 3

您可以检查点击的目标项是否有某个类，然后才继续。

$(document).on("click", '.someClass', function(e){
    if( e.target.classList.contains('someClass') ) return false;
})

Answer 4

pointer-events，功劳归@Tibos

＆＃13;

$(document).on("click", ".parent-component", function(e) {
  console.log('click on: ' + e.target.className);
});

＆＃13;

.no-click {
  pointer-events: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-component">
    <div class="form-group no-click">
        <label for="my-input" style="pointer-events: none" >Label</label>
        <input type="text" name="my-input" id="my-input" class="form-control" />
        <span>This still sends clicks to parent</span>
    </div>
</div>

＆＃13;

Answer 5

您可以通过多种方式执行此操作

这只是一个例子，你可以从父母中排除子元素。

$(document).ready(function(){
  $(document).on('click', '.main', function(e){
  alert('Parent was clicked'); 
  }).find('.child').on('click', function(){
  
  return false;
  });

});

.main{
  background: orangered;
  color: white;
  font-weight: bold;
  padding: 10px;
  height: 400px;
  width: 400px;
  padding: 10px;
}

.child{
  background: green;
  color: white;
  margin: auto;
   height: 40%;
  width: 40%;
  padding: 10px;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='main'>
  Click me and I will fire up something
  <div class='child'>
    If you click on me I will not fire.....
    I am the child you cannot click me
    </div>
  
  </div>

另一种方式

$(document).ready(function(){
  $(".main").click(function(){
  alert('Parent was clicked'); 
  }).children().click(function(){
  
  return false;
  });

});

.main{
  background: orangered;
  color: white;
  font-weight: bold;
  padding: 10px;
  height: 400px;
  width: 400px;
}

.child{
  background: green;
  color: white;
  margin: auto;
   height: 40%;
  width: 40%;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='main'>
  Click me and I will fire up something
  <div class='child'>
    If you click on me I will not fire.....
    This is the child you cannot click me
    </div>
  
  </div>

不要点击子元素

5 个答案: