остановить распространение событий при использовании модальной кнопки автоформирования метеора

Я создал группу списков, заключенную в шаблон afModal. Внутри каждого элемента группы списка есть кнопки с глифами, которые запускают различные события.

<div class="list-group">
    {{#each getRuns}}
        {{#afModal title="Edit Run" class="list-group-item" collection="Runs" operation="update" doc=_id formId="editRunForm"}}
                {{#if active}}
                    <span class="glyphicon glyphicon-pause pull-right" name="pause" id="{{_id}}"></span>
                    <span class="badge">Active</span>
                {{else}}
                    <span class="glyphicon glyphicon-remove pull-right" name="delete" id="{{_id}}"></span>
                    <span class="glyphicon glyphicon-play pull-right" name="activate" id="{{_id}}"></span>
                {{/if}}
                <h3>{{name}}</h3>
                <p class="list-group-item-text">Assembly: {{assemblyName}}</p>
                <p class="list-group-item-text">Quantity: {{quantity}}</p>
                <p class="list-group-item-text">Progress: {{completedSteps}} of {{totalSteps}} steps completed</p>
        {{/afModal}}
    {{/each}}
</div

Вот события щелчка по глификону

'click [name="delete"]': function(event) {
    if (confirmDelete()) {
        Meteor.call('removeRun', event.target.id, function(error) {
            if (error) {
                alert(error);
            }
        });
    }

    event.preventDefault();
},
'click [name="activate"]': function(event) {
    Meteor.call('activateRun', event.target.id);
    event.preventDefault();
},
'click [name="pause"]': function(event) {
    Meteor.call('pauseRun', event.target.id);
    event.preventDefault();
}

Когда инициируются события щелчка по глификону, также активируется расположенная выше кнопка afModal. Я пытался включить event.stopPropagation(), event.stopImmediatePropagation() и event.preventDefault() в событие щелчка глификона, чтобы предотвратить появление afModal, но ни один из них не работает.

Ранее группа списка была обернута элементами ссылки и выглядела примерно так.

<div class="list-group">
    {{#each getRuns}}
        <a href="{{pathFor 'editRun'}}" class="list-group-item">
                {{#if active}}
                    <span class="glyphicon glyphicon-pause pull-right" name="pause" id="{{_id}}"></span>
                    <span class="badge">Active</span>
                {{else}}
                    <span class="glyphicon glyphicon-remove pull-right" name="delete" id="{{_id}}"></span>
                    <span class="glyphicon glyphicon-play pull-right" name="activate" id="{{_id}}"></span>
                {{/if}}
                <h3>{{name}}</h3>
                <p class="list-group-item-text">Assembly: {{assemblyName}}</p>
                <p class="list-group-item-text">Quantity: {{quantity}}</p>
                <p class="list-group-item-text">Progress: {{completedSteps}} of {{totalSteps}} steps completed</p>
        </a>
    {{/each}}
</div>

Используя элементы «a» (и используя те же обработчики событий щелчка глификона), я смог остановить срабатывание элемента «a». Я бы очень хотел использовать шаблон afModal, если это возможно, но не могу, чтобы модальное окно появлялось каждый раз, когда щелкают один из glpyhicons. Любой совет?


person tbird    schedule 04.06.2015    source источник


Ответы (1)


Ключ вызывает preventDefault перед всем остальным, поэтому изменение

'click [name="pause"]': function(event) {
    Meteor.call('pauseRun', event.target.id);
    event.preventDefault();
}

to

'click [name="pause"]': function(event) {
    event.preventDefault();
    Meteor.call('pauseRun', event.target.id);
}

должно сработать. Конечно, вы должны сделать это для всех ваших обработчиков событий.

person Serkan Durusoy    schedule 27.10.2015