我有两个div,一个大,另一个小一些,每个div都有自己的OnClick方法。我遇到的问题是当我点击较小的div时,大div的OnClick方法也被调用。两个不同点击两个div,一个在另一个
我可以避免这种情况?
我有两个div,一个大,另一个小一些,每个div都有自己的OnClick方法。我遇到的问题是当我点击较小的div时,大div的OnClick方法也被调用。两个不同点击两个div,一个在另一个
我可以避免这种情况?
检测点击了哪个元素的最好方法是分析事件的目标(点击事件)。我为这个案例准备了一个小例子。你可以在下面的代码中看到它。
function amIclicked(e, element) { e = e || event; var target = e.target || e.srcElement; if(target.id==element.id) return true; else return false; } function oneClick(event, element) { if(amIclicked(event, element)) { alert('One is clicked'); } } function twoClick(event, element) { if(amIclicked(event, element)) { alert('Two is clicked'); } }
这个JavaScript方法你执行你的脚本
例
<style> #one { width: 200px; height: 300px; background-color: red; } #two { width: 50px; height: 70px; background-color: yellow; margin-left: 10; margin-top: 20; } </style> <div id="one" onclick="oneClick(event, this);"> one <div id="two" onclick="twoClick(event, this);"> two </div> </div>
我希望这有助于之前被调用。
如果您决定使用诸如www.jquery.com之类的JavaScript库,则可以使用传播预防选项轻松完成要执行的操作。
你不需要使用jQuery或其他任何东西,它很容易用普通的javascript来完成。 – 2010-01-06 18:00:53
你正在处理的是事件冒泡。看看这篇文章:http://www.quirksmode.org/js/events_order.html。
基本上,从传递给父元素停止的情况下,你可以使用这样的事情:
document.getElementById('foo').onClick = function(e) {
// Do your stuff
// A cross browser compatible way to stop propagation of the event:
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
您正在运行到事件传播的一个常见的情况。查看quirksmode.org以获取关于究竟发生了什么的全部细节。基本上,你需要在较小的div的点击处理程序做的是这样的:
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
我假设这些元素是嵌套的。 – SLaks 2010-01-06 17:58:24
你可以发布演示吗?你可以使用http://jsbin.com。 – SLaks 2010-01-06 18:06:43