阻止事件冒泡 DOM

Question

我有一个在容器文档上触发的事件处理程序，将其传播到自身内部的 li-Element。出于某种原因，当我按下回车键时，该事件也会触发一个链接，该链接位于 DOM 树的更上方。我无法阻止事件使 DOM 冒泡，我不知道为什么。任何人都可以帮忙吗？谢谢。

我正在使用 jQuery 1.7，不幸的是，由于它的复杂性，我无法给出任何有意义的实时代码示例...... :-(

我的 HTML 是这样的：

<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>

我的 Javascript 片段如下所示：

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

和

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

会发生什么：

#contentBox 的内容是使用 ajax 动态加载的。 我有一个元素列表，可以动态扩展。 每次我添加一个新元素时，都会添加 fieldset 中的一组所有标签。 我可以使用旁边的链接 class="del" 删除一个元素。 当用户在输入框中输入内容时，我会在其下方显示一个实时搜索框，以便他可以从那里接管条目。这也可以通过按向下箭头，浏览搜索结果，然后按return 来接管结果。

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

问题：如果我按 return 来接管结果集，则删除链接的 click-event-handler 也会触发上述事件。

我无法通过 e.stopPropagation、e.stopImmediatePropagation、e.preventDefault() 和以此类推。

我只发现检查删除链接事件处理程序中的事件目标会阻止条目被删除。但我更希望事件不要到达 a-click 事件。

%-/

有什么想法吗？

Answer 1

你试过使用jQuery的event.stopPropagation();吗？

试试这个：

event.stopPropagation();

还有：

event.bubbles = false;

像魅力一样工作.....

Answer 2

$(document).on('click', '.new-projects-edit-show', function(event){
  event.stopPropagation();
});

这对我有用。