Question

这是我的脚本代码：

<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();
});

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

Answer 1

您需要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();
    }
});

Answer 2

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

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

Answer 3

在document点击后，您可以检查自己是否未点击主播。因此，在锚定点击时，您会显示购物车。如果您点击其他地方，请隐藏购物车。

请注意，否则，您可以使用event.stopPropagation在bubbling阶段停止在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>

我怎么能让$（document）.click（）先执行$（element）.click（）？

3 个答案: