2011-11-18 119 views
0

我有一个事件处理程序正在一个容器文档上触发,将其传播到一个li-Element内部。出于某种原因,当我按下return时,该事件也会在DOM树的更上方发生链接。我无法阻止事件冒泡DOM,我不知道为什么。谁能帮忙?谢谢。停止事件从冒泡的DOM

我使用jQuery 1.7不幸的是我不能给活代码示例,使任何意义,由于它的复杂... :-(

我的HTML是这样的:

我的Javascript
<div id="contentBox"> 

    <form [...]> 

     <a class="del" href="javascript:[...]">Delete entry</a> 

     <fieldset> 
      <legend>An entry</legend> 

      <input name="xy" class="lmti"> 

      <ul> 
       <li>Result 1</li> 
       <li>Result 2</li> 
       <li>Result ...</li> 
      </ul> 
     </fieldset> 

    </form> 

</div> 

件看起来像这样:

$('#contentBox').on('click', '.del', function(e) { [...deletes an entry...] }); 

$('#contentBox').on('keyup', '.lmti', function (e) { [...takes over search results...] }); 

会发生什么情况是这样的:

#contentBox的内容被用ajax动态加载。 我有一个列表中的元素,我可以动态扩展。 每次添加新元素时,都会添加字段集中的一组所有标记。 我可以使用链接class =“del”旁边的元素来删除元素。 当用户键入输入框时,我会在它下面显示一个实时搜索框,以便他可以从那里接管条目。这也可以通过按向下箭头完成,通过搜索结果,然后按返回接管结果。

在上述事件中,我检查了一个按下的返回,我实际上从标题列表中选取标题并将其放入HTML输入字段中。像谷歌实时搜索。

问题:如果我按返回接管一个结果集,上述事件也被触发,用于删除链接的点击事件处理程序。

我无法停止传播与e.stopPropagation的任何组合,e.stopImmediatePropagatione.preventDefault()等。

我只发现在delete-link事件处理程序中检查事件目标会停止删除条目。但我宁愿事件不要达到一个 -click事件。

% -/

任何想法?

+0

你使用'on'不仅会束缚的事件处理程序如果它们内部发生的元素与给定选择器匹配,则触发。正如你可以看到[这里](http://jsfiddle.net/WUYvp/),你给出的简化例子非常完美。 **我会检查您获得的HTML是否有效,并且您以正确的顺序关闭标签,并且没有错过结束标签。**如果您仍然遇到问题,我们可以提供帮助是否可以提供一段代码来显示您遇到的行为。 – Matt

+0

检查'e.target'属性 - 它会告诉你哪个元素事件触发。 –

+0

@Matt“*事件处理程序...只会触发... *”。事件**在元素处触发**,事件处理程序由**执行**(或调用)。 –

回答

1

您是否尝试过使用jQuery的event.stopPropagation();?使用

试试这个:

event.stopPropagation(); 

连同:

event.bubbles = false; 

的作品就像一个魅力.....