CODEWITHSUNDEEP
javascriptjquery
Arsen Alexanyan
Arsen Alexanyan

Reputation: 3141

How I can make $(document).click() execute earlier that the $(element).click()?

Here is my script code:

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

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

I have anchor element tag where onclick="showShoppingCartPopup()". The problem is when I am clicking on that anchor the popup is not become visible because $(document).click() is executing after $(element).click() and the popup immediately becomes invisible. When I am commenting 

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

section, popup is getting visible without any problem. So what should I do to achieve what I need? Thanks for the help.

Upvotes: 2

Views: 766

Answers (3)

Satpal
Satpal

Reputation: 133403

You need event.stopPropagation(), it prevents the event from bubbling up the DOM tree. Hence document click handler will not be executed.

Pass event to handler i.e. onclick="showShoppingCartPopup(event)"

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

Note: I would recommend to you to get rid of inline event handler and use unobtrusive event handler.

As per comment can't pass any event there

As you can give an identifier or CSS class to anchor element to identify it. then you can check if the element which is clicked is not the anchor

$(document).click(function (e) {
    if ($(e.target).closest('a.myClass').length == 0) {
        $('.shoppingCartPopup').hide();
    }
});

Upvotes: 3

Anthony
Anthony

Reputation: 2122

On you document's click, you could check that you've not clicked on your anchor. So, on anchor's click you show the cart. If you click elsewhere, hide the cart.

Note that otherwise, you could use event.stopPropagation to stop propagation in the DOM in bubbling phase.

See 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>

Upvotes: 0

MGA
MGA

Reputation: 531

use event.stopPropagation() as the last line of your method, it will stop the event to propagate to dom.

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

Upvotes: 1

Related Questions