Question

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

所以，它看起来像这样：

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

目前，当用户点击番茄时，会触发番茄的正常顺序，但事情就会出错。因为它一旦开火番茄，它就会递归地莴苣，最后是面包。

我认为这样做是因为技术上用户DID在这些div中单击，但仅仅因为番茄嵌套在它们内部。

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

所以，我的问题是，是否有可能使div对于点击“不透明”，这样即使它们彼此嵌套，也只有实际点击的那些计数。

Answer 1

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

我建议您阅读以下内容，以便更好地了解正在发生的事情：quirksmode.org's excellent explanation of event bubbling。

Answer 2

在非IE浏览器中，event.stopPropagation();将阻止事件冒泡到父节点，在IE中，event.cancelBubble = true;应该可以解决问题。 event是传递给侦听器的参数。

Answer 3

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

我怀疑对服务器的XMLHttpRequest调用可能同时被解雇了。

但是，我能够通过在div中放置块级（空）<a>标记来解决问题，然后将我的点击事件放在<a>标记上而不是{{ 1}}。

所以我刚刚更改了代码：

<div>

对此：

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

多个onClick事件触发

3 个答案: