JS忙加载指示器忽略中间点击

Question

My busy loading indicator basically works by detecting clicks. However, I just noted that when I middle click an item, it opens a link in a new tab and then the loading indicator shows up forever. How can I tell JS to ignore the middle mouse button?

 window.onload = setupFunc;

     function setupFunc() {
       document.getElementsByTagName('body')[0].onclick = clickFunc;
       hideBusysign();
         Wicket.Ajax.registerPreCallHandler(showBusysign);
         Wicket.Ajax.registerPostCallHandler(hideBusysign);
         Wicket.Ajax.registerFailureHandler(hideBusysign);
     }

     function hideBusysign() {
       document.getElementById('busy').style.display ='none';
     }

     function showBusysign() {
       document.getElementById('busy').style.display ='inline';
     }

     function clickFunc(eventData) {
       var clickedElement = (window.event) ? event.srcElement : eventData.target;
       if (clickedElement.tagName.toUpperCase() == 'BUTTON' || clickedElement.tagName.toUpperCase() == 'A' || clickedElement.parentNode.tagName.toUpperCase() == 'A'
         || (clickedElement.tagName.toUpperCase() == 'INPUT' && (clickedElement.type.toUpperCase() == 'BUTTON' || clickedElement.type.toUpperCase() == 'SUBMIT'))) {
         showBusysign();
       }
     }

Answer 1

You can try to, but it won't work very well with all browsers.

This page describes what browsers support disabling the middle mouse button via JS. Firefox is not one of them...

Answer 2

Another option is to scope the click events to only work on AJAX links/buttons.

For instance (rewriting with jQuery only b/c I'm hopeless without it):

// On load
$(function() {
  Wicket.Ajax.registerPreCallHandler(showBusysign);
  Wicket.Ajax.registerPostCallHandler(hideBusysign);
  Wicket.Ajax.registerFailureHandler(hideBusysign);
});    

// Assuming you add an "ajax" class to all appropriate markup (in Wicket)

// .live would be appropriate, too
$('body').delegate('a.ajax, input:button.ajax, input:submit.ajax', 'click', function(){
  showBusysign();
});