开发者

JS Busy loading indicator ignore middle click

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.toUpp开发者_开发技巧erCase() == 'SUBMIT'))) {
         showBusysign();
       }
     }


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...


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜