Question

我有一个面板，在一个名为“details”的元素点击上滑动打开，并根据数据属性值通过ajax填充面板。我还设置了如果你在那个面板外面关闭，它将关闭。如果面板已打开且用户单击其他“details”元素，我希望面板关闭并再次打开，并使用新数据属性中的数据填充。

问题是代码检查面板是否可见，如果是，则不会加载ajax。如何更改此内容以使click事件知道mousedown事件在完成之前已完成？

// SLIDING PANEL
$(".details").on("click", function(e){
    e.preventDefault();
    var panel = $("#DetailsPanel");
    var mkey = $(this).data("masterkey-id");
    var _self = $(this);
        // fetch data ONLY when panel is hidden...
        // otherwise it fetches data when the panel is closing
        if (!panel.is(':visible')) {
            panel.load("/com/franchise/leads.cfc?method=getLeadDetails", { mkey: mkey }, function(response, status, xhr) {
                // if the ajax source wasn't loaded properly
                if (status !== "success") {
                    var msg = "<p>Sorry, but there was an error loading the document.</p>";
                    panel.html(msg);
                };
                // this is part of the .load() callback so it fills the panel BEFORE opening it
                panel.toggle("slide", { direction: "right" }, "fast", function(){
                    _self.parent().parent().addClass("warning");
                });
            });
        } else {
            panel.toggle("slide", { direction: "right" }, "fast", function(){
                _self.parent().parent().removeClass("warning");
            });
        };

    return false;
});

$(document).on("mousedown", function(){
    $("#DetailsPanel").hide("slide", { direction: "right" }, "fast", function(){
        //_self.parent().parent().removeClass("warning");
    });
});
// don't close panel when clicking inside it
$(document).on("mousedown","#DetailsPanel",function(e){e.stopPropagation();});

$(document).on("click", "#ClosePanel", function(){
    $("#DetailsPanel").hide("slide", { direction: "right" }, "fast", function(){
        $("#LeadsTable tr").removeClass("warning");
    });
});
// END SLIDING PANEL

Answer 1

在另一个环境中为我设置超时时间：

onclick="window.setTimeout( function(){ DO YOUR STUFF }, 2);"

这解决了许多此类问题。

Answer 2

我对此并不完全确定，但如果你使用＆＃34; mouseup＆＃34;相反＆＃34;点击＆＃34;可以像你期望的那样工作。试试看，如果我错了，请告诉我。

Answer 3

好的，所以我找到了这个小块http://www.gmarwaha.com/blog/2009/06/09/jquery-waiting-for-multiple-animations-to-complete/，它的效果非常好。到目前为止没有问题。

这是新代码

    $(".details").on("click", function(e){
        e.preventDefault();
        var panel = $("#DetailsPanel");
        var mkey = $(this).data("masterkey-id");
        var _self = $(this);
            // fetch data ONLY when panel is hidden...
            // otherwise it fetches data when the panel is closing
        var wait = setInterval(function() {
            if( !$("#DetailsPanel").is(":animated") ) {
                clearInterval(wait);
                // This piece of code will be executed
                // after DetailsPanel is complete.
                if (!panel.is(':visible')) {
                    panel.load("/com/franchise/leads.cfc?method=getLeadDetails", { mkey: mkey }, function(response, status, xhr) {
                        // if the ajax source wasn't loaded properly
                        if (status !== "success") {
                            var msg = "<p>Sorry, but there was an error loading the document.</p>";
                            panel.html(msg);
                        };
                        // this is part of the .load() callback so it fills the panel BEFORE opening it
                        panel.toggle("slide", { direction: "right" }, "fast", function(){
                            _self.parent().parent().addClass("warning");
                        });
                    });
                } else {
                    panel.toggle("slide", { direction: "right" }, "fast", function(){
                        _self.parent().parent().removeClass("warning");
                    });
                };
            }
        }, 200);
        return false;
    });

在元素onclick开始之前等待文档mousedown完成

3 个答案: