twitter-bootstrap 单击子元素时忽略父 onClick 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26061254/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ignore Parent onClick event when Child element is clicked
提问by Tom Rudge
Please see - http://www.bootply.com/dR7fxjP1bk
请参阅 - http://www.bootply.com/dR7fxjP1bk
By clicking any of the div.rows (lets call this parent), an onClick event is activated, for demo purposes an alert pops up.
通过单击任何 div.rows（我们称之为父级），一个 onClick 事件被激活，出于演示目的，会弹出一个警报。
Within the row an accordion collapses when the "info" (orange button) is clicked (lets call this child), but the problem is that the parents alert triggers.
当单击“信息”（橙色按钮）时，该行内的手风琴折叠（让我们称之为孩子），但问题是父母警报触发。
I need the info button not to trigger the alert, only when anywhere else is clicked the alert appears.
我需要信息按钮不触发警报，只有在单击其他任何地方时才会出现警报。
I've tried various ways such as using (e)stopPropagation .on .off calls etc... I'm not the best jquery guy so need a little help getting this to work - and also help me learn something!
我尝试了各种方法，例如使用 (e)stopPropagation .on .off 调用等......我不是最好的 jquery 人，所以需要一点帮助才能让它工作 - 并帮助我学习一些东西！
<div class="row ticket-selector" onclick="alert('Hello World!');">
<a data-toggle="collapse" data-parent="#ticket-panel" href="#collapseOne" class="tickets-more"><span class="halflings info-sign orange"></span></a>
</div>
The above is the jist - but see for better understanding - http://www.bootply.com/dR7fxjP1bk
以上是 jist - 但为了更好地理解，请参阅 - http://www.bootply.com/dR7fxjP1bk
采纳答案by Regent
The idea is to remove onclick=""handler saving its value in another field and then to execute (evaluate) value in custom clickevent handler:
这个想法是删除onclick=""处理程序，将其值保存在另一个字段中，然后在自定义click事件处理程序中执行（评估）值：
示例代码。
$(document).ready(function()
{
var elements = $(".ticket-selector");
elements.each(function()
{
var handler = $(this).attr('onclick');
$(this).data('click', handler);
});
elements.attr('onclick', '');
elements.click(function(e)
{
if (!$(e.target).hasClass("info-sign"))
{
eval($(this).data('click'));
}
});
});
回答by Mayank
Check the working demo HERE
在此处检查工作演示
I think you should use event.stopPropagation()jquery api and you can use it as
我认为您应该使用event.stopPropagation()jquery api，您可以将其用作
$(document).ready(function(){
$('.tickets-more').click(function(event){
// your stuff here
alert("Alert On Click");
event.stopPropagation();
});
});
event.stopPropagation()stop the event bubbling that you are facing. For further documentation refer the from HERE
event.stopPropagation()停止您面临的事件冒泡。有关更多文档，请参阅此处
Hope it helps...
希望能帮助到你...
回答by Konstantin XFlash Stratigenas
Use css:
使用CSS：
pointer-events: none;
This will make the relevant elements completely transparent to mouse events.
这将使相关元素对鼠标事件完全透明。
回答by MeSo2
I found that this worked for me to trap the click.
我发现这对我有用以捕获点击。
onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false;"
回答by jovany cruz
If the case is avoid clicking on elements inside them, this will help you.
如果情况是避免单击其中的元素，这将对您有所帮助。
function clickhere(obj){
let theid = obj.id;
console.log(theid);
event.stopPropagation();
}
回答by Beri
If using css classes doesn't bother you, you could check clicked element attributes/classes. Like so:
如果使用 css 类不打扰您，您可以检查单击的元素属性/类。像这样：
$('.parent-element').on('click',function(e){
if ( $(this).attr('data-toggle') ){//has attribute data-toggle
e.preventDefault();
return false;
}
});
This will depend on your DOM tree a bit more. You could find a condition that will disable any event
这将更多地取决于您的 DOM 树。您可以找到禁用任何事件的条件
回答by jollarvia
take the info class out of the div. Wrap em both with another clean div.
从 div 中取出 info 类。用另一个干净的 div 将它们包裹起来。
回答by dmikam
In the orange button click handler add return false; at the end - this will prevent to bubble the event to the parent. Just like this:
在橙色按钮单击处理程序中添加 return false; 最后 - 这将防止将事件冒泡给父级。像这样：
jQuery('.tickets-more').click(function(){
// your stuff here
return false;
});
