多个onClick事件触发

我有几个互相嵌套的div。每个人都有自己的onclick事件。所以，想象它就像一个三明治，底层是面包（这层比地里嵌套的大），然后是生菜，然后是番茄。多个onClick事件触发

所以，它看起来像这样：

--------------------------- 
| Bread     | 
|       | 
| ----------------------- | 
| | Lettuce    | | 
| |      | | 
| | ------------------- | | 
| | |Tomato   | | | 
| | |     | | | 
| | | <*click>  | | | 
| | |     | | | 
| | |     | | | 
| | ------------------- | | 
| ----------------------- | 
---------------------------

目前，当用户点击的番茄，它触发关闭番茄正确的顺序，但随后事情出差错。因为一旦它发射番茄，它递归地发射生菜，最后是面包。

我想这是因为技术上用户DID在这些div内单击，但只是因为番茄嵌套在它们内部。

它的方式应该的工作是，如果用户点击三明治的番茄部分，那么它应该只发射番茄的事件。另一方面，如果用户点击在番茄后面偷看的莴苣部分，则应该开火生菜。

所以，我的问题是，是否有可能使点击“不透明”，以便即使它们嵌套在对方内，只有实际点击的点数。

来源

2010-09-27 DenverMatt

您可以在当前的处理程序代码之后添加return false以防止点击冒泡或传播......这是导致父元素上的click事件的原因。

为了更好地理解发生了什么，我建议阅读以下内容：quirksmode.org's excellent explanation of event bubbling。

来源

2010-09-27 23:35:41

在非IE浏览器中event.stopPropagation();会阻止事件冒泡到父节点，在IE中，event.cancelBubble = true;应该这样做。 event是传递给侦听器的参数。

来源

2010-09-27 23:40:15

嘿，伙计们，感谢您的帮助。不幸的是，我想我可能会无意中遗漏了一条重要的信息。在这种情况下，JS实际上是将一个AJAX请求发回服务器。因此，出于某种原因，在这种情况下，事件处理程序的“返回错误”不起作用。

我怀疑对服务器的XMLHttpRequest调用可能是同时被触发的。

但是，我能够通过将块级（空）<a>标签在div里面，然后把我的单击事件的<a>标签，而不是<div>来解决这个问题。

所以我就改从这个代码：

<div class='container' id='idstring' onclick="ajaxcall(parameters)"> 
    <? server-side call to recursive function ?> 
</div>

要这样：

<div class='container' id='idstring'><a onclick="ajaxcall(parameters)"> 
    <? server-side call to recursive function ?> 
</a></div>

来源

2010-09-28 02:21:51 DenverMatt

多个onClick事件触发

回答

相关问题