остановить событие от всплеска DOM - PullRequest
Новая
       24

остановить событие от всплеска DOM

0 голосов
/ 18 ноября 2011

У меня есть обработчик событий, который запускается в документе контейнера, распространяя его на элемент li внутри себя. По какой-то причине, когда я нажимаю 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...] });

Что происходит, это:

Содержимое # contentBox динамически загружается с использованием ajax. У меня есть список элементов, которые я могу динамически расширять. Каждый раз, когда я добавляю новый элемент, добавляется набор всех тегов в fieldset . Я могу удалить элемент, используя ссылку class = "del" рядом с ним. Когда пользователь вводит в поле ввода, я отображаю поле live-поиска под ним, чтобы он мог принимать записи оттуда. Это также можно сделать, нажав стрелка вниз , просмотрев результаты поиска, а затем нажав return , чтобы получить результат.

В вышеупомянутом событии я проверяю нажатие return и фактически беру заголовок из списка заголовков и помещаю его в поле ввода HTML. Как и в Google Live Search.

Проблема: если я нажму return для получения набора результатов, указанное выше событие также запускается для обработчика события click для ссылки удаления.

Мне не удалось остановить распространение с любой комбинацией e.stopPropagation , e.stopImmediatePropagation , e.preventDefault () и так далее.

Я только обнаружил, что проверка цели-события в обработчике события delete-link останавливает удаление записи. Но я бы предпочел, чтобы событие не доходило до события a .

% - /

Есть идеи?

Ответы [ 2 ]

1 голос
/ 02 октября 2018 
$(document).on('click', '.new-projects-edit-show', function(event){
  event.stopPropagation();
});

Это сработало для меня.

1 голос
/ 28 сентября 2012

Вы пытались использовать jQuery event.stopPropagation();?

, попробуйте использовать это: 

event.stopPropagation();

вместе с: 

event.bubbles = false;

работает как шарм .....

...