Jquery предотвращает появление следующих событий

0

У меня есть простой div и флажок внутри. Оба элемента привязаны к событию onClick. Сначала запускается на внутреннем элементе, поэтому checkbox, а затем на div. Мой вопрос: возможно ли остановить любые другие события в DOM после повышения первого события до следующего щелчка? другими словами, я могу остановить флажок onClick, чтобы вызвать событие из div?

<div onclick="divOnClic(this);" style="width: 200px; height: 200px ; background-color: red">
    <input type="checkbox" onclick="checkboxOnClick(this);"/>
</div>

function divOnClic(e) {
        alert('z diva');
    }

    function checkboxOnClick(e) {

        alert('z checka');
        e.preventDefault();

    }

вот живой пример http://jsfiddle.net/QK43u/1/

  • 0
    Вы хотите триггер checkboxOnClick, но не divOnClic?
  • 0
    @jaapaurelio да, это то, чего я хочу достичь.
Теги:

4 ответа

2
Лучший ответ

Это решит вашу проблему:

<div onclick="divOnClic(event);" style="width: 200px; height: 200px ; background-color: red">
        <input type="checkbox" onclick="checkboxOnClick(event);"/>
    </div>

    function divOnClic(e) {
            alert('z diva');
        }

        function checkboxOnClick(e) {

            alert('z checka');
            e.stopPropagation()

        }
Поделиться
  • 0
    у меня все еще оба события вызваны
  • 0
    у вас есть загруженная библиотека jquery на странице?
Показать ещё 3 комментария
0

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

e.stopPropagation();
Поделиться
  • 0
    ты можешь показать мне где? Я пытался, и это не сработало.
  • 0
    @null можно было считать некачественным до редактирования.
Показать ещё 5 комментариев
0

preventDefault() предотвращает выполнение события по умолчанию. Это не мешает пузыриться. Вам нужно использовать метод stopPropagation().

$('#myDiv').on('click',divOnClick);
$('#myCheckBox').on('click',checkboxOnClick);

function divOnClick(e) {
  alert('div got clicked');
}
function checkboxOnClick(e) {
  e.stopPropagation();
  alert(e.isPropagationStopped());
 }

Примечание. Я рекомендую использовать встроенные стили или встроенные обработчики событий. Смотрите здесь скрипку: http://jsfiddle.net/4Lged/7/

Примечание: пузырь событий происходит от внутреннего элемента и распространяется на внешний элемент. Для этого нет необходимости. Захват другого пути вокруг div будет распространять свое событие на дерево. Там мы не останавливаем событие от распространения.

Поделиться
  • 0
    НЕТ, это также остановит событие флажка, но не от div.
0

Вы должны использовать event внутри своего вызова функции. И используйте stopPropagation() чтобы предотвратить распространение родительского элемента.

<div onclick="divOnClic(event);" style="width: 200px; height: 200px ; background-color: red">
    <input type="checkbox" onclick="checkboxOnClick(event);"/>
</div>

<script>
    function divOnClic(e) {
            alert('z diva');
        }

    function checkboxOnClick(e) {
        e.stopPropagation()
        alert('z checka');
    }
</script>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню