我怎么能让$（document）.click（）执行更早的$（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

我有锚元素标签，其中onclick =“showShoppingCartPopup（）”。问题是，当我点击该锚点时，弹出窗口不可见，因为$（document）.click（）在$（element）.click（）之后执行，弹出窗口立即变为不可见。当我评论时

$(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.

部分，弹出窗口显示没有任何问题。那么我该怎么做才能达到我的需要呢？谢谢您的帮助。

3 个解决方案

#1

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

你需要event.stopPropagation（），它可以阻止事件冒泡DOM树。因此，不会执行文档单击处理程序。

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

将事件传递给处理程序，即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

因为你可以给一个标识符或CSS类来锚定元素来识别它。然后你可以检查点击的元素是不是锚点

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

#2

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

使用event.stopPropagation（）作为方法的最后一行，它将阻止事件传播到dom。

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

#3

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.

请注意，否则，您可以使用event.stopPropagation在冒泡阶段停止DOM中的传播。

See event.target.

请参阅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>

#1