Question

我有一个在容器文档上触发的事件处理程序，将其传播到内部的li-Element。出于某种原因，当我按下return时，事件也会触发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...] });

这是怎么回事：

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

在上面的事件中，我检查了一个按返回，我实际上从标题列表中取一个标题并将其放在HTML输入字段中。就像谷歌直播搜索一样。

问题：如果我按 return 来接管结果集，则还会针对delete-link的click-event-handler触发上述事件。

我无法使用 e.stopPropagation ， e.stopImmediatePropagation ， e.preventDefault（）的任意组合停止传播等等。

我只发现在delete-link事件处理程序中检查事件目标会阻止删除条目。但是我希望事件不要到达 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();
});

这对我有用。

阻止事件冒泡DOM

2 个答案: