We all found that it is very easy to bind events through jQuery.
Copy codeThe code is as follows: <TEXTAREA class = javascript name = code rows = 15 cols = 50> $ ("a"). click (function (){
Console.info ("");
Return false;
});
</TEXTAREA>
However, after binding event A, I found that I needed event B to decide whether to trigger the event. It is easy to do, and now I will change it.Copy codeThe code is as follows: <TEXTAREA class = javascript name = code rows = 15 cols = 50> $ ("a"). click (function (){
Console.info ("B ");
Return false;
});
$ ("A"). click (function (){
Console.info ("");
Return false;
});
</TEXTAREA>
Can the click event be blocked? This is counterproductive.
If event B needs to be asynchronously called to determine whether event A needs to be triggered?Copy codeThe code is as follows: <TEXTAREA class = javascript name = code rows = 15 cols = 50> $ ("a"). click (function (){
$. Ajax ({
Url: "B .html ",
Success: function (msg ){
If (msg ){
Console.info ("pass ");
Return true;
} Else {
Console.info ("nopass ");
Return false;
}
}
});
});
$ ("A"). click (function (){
Console.info ("B ");
Return false;
});
</TEXTAREA>
Fact discovery is impossible. What should we do?
Let's talk about several ideas:
Bind A later event to another trigger. For example, if event A is bound to the click event, event B is bound to the mouseover event, which triggers the mouseover event first and then blocks the click event. (After research, it was found that this was almost impossible)
Process two events through the queue of jquery. (This can solve the issue of triggering events successively, but the reality is that all events in the project have been bound. Currently, you need to add a judgment AJAX request before each button event. Or rewrite all button events, or find another path)
Go deep into jQuery's event mechanism, get its event queue, and process its event queue.Copy codeThe code is as follows: <TEXTAREA class = javascript name = code rows = 15 cols = 50> // Let's bind an event by default, which is called A event.
$ ("A"). click (function (){
Console.info (1 );
Return false;
});
// Now we need to trigger the events bound to B first and control whether event A is triggered.
// Obtain the click event in the event object bound to object
Var event = $ ("a"). data ("events"). click;
// This a is also used in our B event. To prevent this object from changing, the variable that is specially declared to save
Var that = $ ("");
// The following is the B event, but it seems that it is not bound.
Var B = function (){
$. Ajax ({
Url: "B .html ",
Success: function (msg ){
If (msg ){
Console.info ("pass ");
Tt. call (that );
} Else {
Console.info ("nopass ");
}
}
});
Return false;
};
// Key object, please pay more attention to it
Var tt;
// Key code, please pay more attention to it
For (var I in event ){
Tt = event [I];
Event [I] = B; // If you comment this line, the following two lines must be uncommented. The effect is the same, and the principle is different...
// Delete (event [I]);
// That. click (B );
Break;
}
</TEXTAREA>
The problem seems to be solved successfully, but can the return in the AJAX callback function be captured?