Howto:与onclick javascript内的另一个div内的onclick
只是一个简单的问题。 我有一个问题与互相之间的onclick JavaScript的div。 当我点击内部div它应该只火了onclick的JavaScript,但外部div的JavaScript也被解雇。 如何在不触发外部div的javascript的情况下点击内部div?
<html> <body> <div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div <div onclick="alert('inner');" style="width:200px;height:200px;background-color:white;" />inner div</div> </div> </div> </body> </html>
基本上在JavaScript中有两个事件模型。 事件捕获和事件冒泡 。 在事件冒泡的时候,如果你点击里面的div,里面的div点击事件首先被激发,然后点击外部div点击。 而在事件捕获中,首先是外部div事件被触发,而不是内部div事件触发。 要停止事件传播,请在点击方法中使用此代码。
if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation();
查看事件传播的信息
特别是你会想在你的事件处理程序中这样的一些代码来阻止事件的传播:
function myClickHandler(e) { // Here you'll do whatever you want to happen when they click // now this part stops the click from propagating if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); }
return false;
从内部div的onclick函数:
<div onclick="alert('inner'); return false;" ...
你正在处理的是事件传播 。
只需添加以下代码:
window.event.stopPropagation();
这是事件冒泡的情况。
您可以使用
e.cancelBubble = true; //IE
和
e.stopPropagation(); //FF
基于webkit的浏览器的另一种方法是:
<div onclick="alert('inner'); event.stopPropagation;" ...
这里有一些更多的参考来帮助你理解javascript事件冒泡。
你有两个'div'和三个'/ div'。
这是非常有帮助的,但它不适合我。
我所做的是在这里描述。
所以我把一个条件的外部onclick
事件:
if( !event.isPropagationStopped() ) { window.location.href = url; }
您可以使用
$("divOrClassThatYouDontWantToPropagate").click(function( event ) { event.stopPropagation(); });