JQuery：如何停止child onclick事件，同時仍然觸發父級onclick事件

我不知道如何停止child onclick事件，同時仍然觸發父級onclick事件。例如以下結構：JQuery：如何停止child onclick事件，同時仍然觸發父級onclick事件

<div id="parent"> 
    <div id="child1"></div> 
    <div id="child2"></div> 
    <div id="child3"></div> 
</div>

如果我點擊「child1」例如，「child1」不會被觸發，但是，仍然會觸發onclick事件爲「父」 onclick事件。

非常感謝！

來源

2012-09-05 NoOne

你的意思是每點擊時，或一些特殊的情況？ – keyser

如果你不想要他們，你爲什麼要創建兒童onclick事件？ –

我其實想要他們，但存在某種我想暫時禁用它們的情況。 – NoOne

你可以只通過該click父？

$('.child1').click(function(e){ 
    e.preventDefault(); 
    $(this).parent('#parent').trigger('click'); 
});

當您單擊.child1，它會阻止默認操作，然後觸發點擊的child1與#parent的ID父。

其實 - 可能忽略了上述 - 根據下面的評論它可能會導致冒泡。你真正需要做的就是使用e.stopPropagation();。

我創建了一個jsfiddle顯示，雖然child1有一個點擊功能綁定到它，它被忽略，所以父母點擊只能獲取。

來源

2012-09-05 09:35:25

雖然事件會自動發生，但您不應該明確觸發父處理程序，在這種情況下，它甚至可能會觸發處理程序兩次。 –

謝謝！這正是我需要的！我刪除了最後一個觸發父級的命令，就像Felix所說的那樣，它工作的很好！ – NoOne

我已經添加了一個編輯，只是想要另一個選項:)。 –

最簡單的方法是取消綁定子的事件處理程序。

$('#child1').unbind('click');

來源

2012-09-05 09:31:25 Fenton

你的意思是：

$('#parent').on('click', function(e) { 
    if(e.target !== this) { 
     return; 
    } 
});

來源

2012-09-05 09:31:28

'.target'將始終是您綁定到的元素，'.currentTarget'是當前事件目標。 – timidboy

@Onchie：不，反之亦然。 –

哇！對不起，只是有點困惑。 – timidboy

這是上述問題的解決方案。請檢查演示鏈接一次。

演示：http://codebins.com/bin/4ldqp7l

HTML

<div id="parent"> 
    <div id="child1"> 
    Child-1 
    </div> 
    <div id="child2"> 
    Child-2 
    </div> 
    <div id="child3"> 
    Child-3 
    </div> 
</div>

jQuery的

$(function() { 
    $("#parent").click(function() { 
     alert("Parent has been clicked too...!"); 
    }); 
    $("#child1").click(function(e) { 
     e.stopPropagation(); 
     alert("Child-1 has been clicked...!"); 
    }); 
    $("#child2").click(function() { 
     alert("Child-2 has been clicked...!"); 
    }); 
    $("#child3").click(function() { 
     alert("Child-3 has been clicked...!"); 
    }); 
});

CSS

#parent{ 
    padding:5px; 
    background:#a34477; 
    width:140px; 
    text-align:center; 
    padding:10px; 
} 

#parent div{ 
    border:1px solid #2211a4; 
    background:#a3a5dc; 
    width:100px; 
    text-align:center; 
    font-size:14px; 
    margin-left:10px; 
    margin-top:3px; 
}

演示：http://codebins.com/bin/4ldqp7l

來源

2012-09-05 12:44:01 gaurang171

JQuery：如何停止child onclick事件，同時仍然觸發父級onclick事件

回答

相關問題