jQuery：用戶單擊另一個元素后，我可以返回到同一單擊事件嗎？

Question

我的要求是交換到周圍的小部件。 第一次用戶單擊窗口小部件A標題時，我可以將本地信息/數據存儲在某個位置（即“用戶單擊的widgetId = A”），現在我等待用戶單擊另一個窗口小部件標題WidgetB。

一旦控制權傳遞回原始功能，現在我可以獲得有關小部件B ID的信息，可以交換這些信息。

<div>
<div class="widget header" id="WidgetA"> .... </div>
<div class="widget header" id="WidgetC"> .... </div>
<div class="widget header" id="WidgetB"> .... </div>
</div>

幾周前，我在stackoverflow上看到了一個jQuery代碼，它將控制權發送回早先的click事件，但是從那時起，我一直在搜索它，卻找不到任何地方。

就像是 -

$(..).on("click", function() {
   // some more code
    $(..).XXX("xxx", function(){
          //on second click code flows directly here...
    });

});

Answer 1

這並不容易/可能“返回到上較早的單擊事件” -相反，定義為先檢查是否發生了兩個事件的功能， 是這樣的 ：

var widgetAclicked = false;
var widgetBclicked = false;

$("#WidgetA").click(function() { widgetAclicked = true; process(); }
$("#WidgetB").click(function() { widgetBclicked = true; process(); }

function process() {
    if (!widgetAclicked) return;
    if (!widgetBclicked) return;

    // process when both clicked
}

如果您不想為此使用var ，則可以將其存儲在小部件本身上，例如：

$("#WidgetA,#WidgetB").click(function { 
    $(this).data("beenclicked", true);
    process();
});

function process() {
    if ($("#WidgetA").data("beenclicked") != true 
            || $("#WidgetB").data("beenclicked") != true)
        return;
    // process
}

這也使添加/刪除小部件變得更加容易，而無需任何額外的代碼：

// apply to all widgets
$(".widget").click(function { 
    $(this).data("beenclicked", true);
    process();
});

然后您的process()可以檢查單擊了哪個按鈕，以進行所需的惡意處理。

Answer 2

您可以將單擊的元素ID存儲在數組中，然后您將知道單擊了哪些元素：

$(document).ready(function(){

        var clickedElementsIds = [];

        $('#widget header').on('click' function(event){
            var clickedElementId = event.currentTarget.id;
            clickedElementsIds.push(clickedElementId);
        });
});

當數組中有ID時，您就可以對它們進行任何操作。