Question

我只是在单击父元素时尝试调用jQuery函数。

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

img内有div个标记。当我点击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上的处理程序。

以下是一个例子

＆＃13;

$('.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();
});

＆＃13;

<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>

＆＃13;

Answer 3

您可以使用Event.stopPropagation()来阻止点击事件气泡到其父级，但您还需要添加一个参数事件，这样您的功能就可以在没有浏览器问题的情况下访问它。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

您需要使用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 5

看起来你需要停止冒充DOM链的图像中的click事件。

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

当您点击图片时，该事件会传递给它的父级，在本例中为<div>。那就是行为。要阻止它发生，请调用stopPropagation()函数，该函数是click事件的传入事件参数的一部分。

如何只调用jquery函数onclick父元素

5 个答案: