如何仅在父元素上调用jquery函数onclick [重复]

Question

我试图在仅单击父元素时调用 jQuery 函数。

<div id="clcbox" class="click-img">
    <img id="fire" onclick="createFirework()" src="img/clicker.png" />
</div>

我在div 中有一个img 标签。当我单击div 时，它应该调用一个函数，而当我单击img 时，我想调用另一个函数。我该怎么做？

$('.click-img, .wishes').click(function () {
    $('.flipWrapper').find('.card').toggleClass('flipped');
    return false;
});

当我点击div 时，我应该调用上面的函数。但是现在当我点击图片时，它也在调用这个函数和createFirework()。

Answer 1

问题是由于事件冒泡造成的。如果您以不显眼的方式附加事件，则可以轻松阻止这种行为。

<div id="clcbox" class="click-img">
    <img id="fire" src="img/clicker.png" />
</div>

$('#fire').click(function(e) {
    e.stopPropagation();
    createFirework();
});

$('.click-img, .wishes').click(function (e) {
    $('.flipWrapper').find('.card').toggleClass('flipped');
    e.preventDefault();
});

Answer 2

首先，不要混合使用内联 (onclick) 事件处理程序和 jQuery 事件处理程序。曾经，你有一个 jQuery 事件处理程序代替你的 createFirework 方法，你只需 stopPropagation 停止它调用外部 div 上的处理程序。

下面是一个例子

$('.outer').click(function(e){
   alert("You clicked text in the div");  
});

$('.inner').click(function(e){
   alert("You clicked the button, but the div event handler will not fire");  
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <span>here is some text inside the div, click it</span>
  <button class="inner">Click me</button>
 </div>

Answer 3

你需要使用 stopPropagation 函数： http://www.w3schools.com/jquery/event_stoppropagation.asp

在你的情况下，你需要在图片点击事件中添加这个：

$('.click-img, .wishes').click(function (event) {
    event.stopPropagation();
    $('.flipWrapper').find('.card').toggleClass('flipped');
    return false;
});

Answer 4

看起来你需要阻止图像在 DOM 链中冒泡的点击事件。

$('.click-img, .wishes').click(function (e) {
    $('.flipWrapper').find('.card').toggleClass('flipped');
    e.stopPropagation();
});

当您单击图像时，该事件将传递给它的父级，在本例中为<div>。那是通过行为。要阻止这种情况的发生，请调用 stopPropagation() 函数，该函数是 click 事件的传入事件参数的一部分。

Answer 5

您可以使用Event.stopPropagation()，停止点击事件气泡到其父级，但您还需要添加一个参数事件，以便您的函数可以访问它而不会出现浏览器问题。

//                                     VVVV pass `event` as createFirework's param.
<img id="fire" onclick="createFirework(event)" src="http://placehold.it/50x50" />

但我建议将js 部分和html 部分分开的答案会更好。就像Jamiec's。

function createFirework(event) {
  console.log('inner');
  event.stopPropagation();
}

$('.click-img, .wishes').click(function () {
    console.log('outer');
    return false;
});

#clcbox {
  width: 100px;
  height: 100px;
  border: solid 1px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clcbox" class="click-img">
    <img id="fire" onclick="createFirework(event)" src="http://placehold.it/50x50" />
</div>