Вот мой код скрипта:

<script type="text/javascript">
  $(document).click(function(e) {
    $('.shoppingCartPopup').hide();
  });

  function showShoppingCartPopup() {
    $('.shoppingCartPopup').show();
  }
</script>

У меня есть тег элемента привязки, где onclick="showShoppingCartPopup()". Проблема в том, что когда я нажимаю на эту привязку, всплывающее окно не становится видимым, потому что $ (document) .click () выполняется после $ (element) .click (), и всплывающее окно немедленно становится невидимым. Когда я комментирую

$(document).click(function (e) {
  $('.shoppingCartPopup').hide();
});

Раздел, всплывающее окно становится видимым без каких-либо проблем. Итак, что я должен сделать, чтобы достичь того, что мне нужно? Спасибо за помощь.

2
Arsen Alexanyan 12 Янв 2017 в 09:47

3 ответа

Лучший ответ

Вам нужно event.stopPropagation(), это предотвратит всплывание события в DOM-дереве. Следовательно, обработчик щелчка документа не будет выполнен.

Передайте event обработчику, т.е. onclick="showShoppingCartPopup(event)"

function showShoppingCartPopup(event){
    event.stopPropagation()
    $('.shoppingCartPopup').show();
}

Примечание: я бы порекомендовал вам избавиться от встроенного обработчика событий и использовать ненавязчивый обработчик событий.

Согласно комментарию, не может пропустить ни одного события там

Как вы можете дать идентификатор или CSS-класс для привязки элемента, чтобы идентифицировать его. тогда вы можете проверить, является ли элемент, по которому щелкают, не якорь

$(document).click(function (e) {
    if ($(e.target).closest('a.myClass').length == 0) {
        $('.shoppingCartPopup').hide();
    }
});
3
Satpal 12 Янв 2017 в 07:36

Нажав document, вы можете проверить, что вы не нажали на свой якорь. Итак, по щелчку якоря вы показываете корзину. Если вы нажмете в другом месте, скрыть корзину.

Обратите внимание, что в противном случае вы можете использовать event.stopPropagation, чтобы остановить распространение в DOM в фаза барботирования.

См. event.target.

<!-- Your anchor -->
<a id="my-anchor" href=#" onclick="showShoppingCartPopup()">Show</a>

<script type="text/javascript">
    $(function() {  
        /*
         * On click anywhere on document, this code will be
         * executed.
         * If your target is your anchor, it does nothing. Otherwise,
         * it execute your action.
         */
        $(document).on('click', function(e) {
            //IE 6-8 compatibility
            var target = e.target || e.srcElement;
            //Stop execution if you clicked on your anchor
            if (target.id === "my-anchor") {
                return;
            }
            //Code below is executed only if your target is NOT #my-anchor
            $('.shoppingCartPopup').hide();
        };

        /*
         * On your anchor click, execute this action
         */
        function showShoppingCartPopup() {
            $('.shoppingCartPopup').show();
        }   
    });
</script>
0
AnthonyB 12 Янв 2017 в 07:24

Используйте event.stopPropagation () в качестве последней строки вашего метода, он остановит распространение события на dom.

function showShoppingCartPopup(e) {
    $('.shoppingCartPopup').show();
    e.stopPropagation()
  }
1
MGA 12 Янв 2017 в 06:51