Проблемы с historyAPI

Добрый день! Возникла проблема с historyAPI, а точнее с перехватчиком событий. Суть проблемы: если нажимать на область контента ссылки - событие перехватывается, а если нажать на padding ссылки - событие не перехватывается, и вместо подгрузки содержимого ajax-ом, я получаю переход по ссылке (с перезагрузкой страницы).

Код перехватчика:

$(document).ready(function(){
 var pattern          = new RegExp("^(https:\/\/"+location.host+"\/|http:\/\/"+location.host+"\/|\/\/"+location.host+"\/|"+location.host+"\/|\/(?!\/))"), // "^\/(?!\/)" - "начинается с /, но дальше - не /"
     pattern_protocol = new RegExp("^(http:\/\/|https:\/\/|\/\/)"), // да, "просто двойной слеш" тоже здесь
     pattern_lochost  = new RegExp("^("+location.host+")");
 $('a[href]').click(function(e){
  if(!$(this).attr('href')){console.log('no href'); return false;}
  var url = $(this).attr('href'),
      isLocal = (pattern.test(url)) ? true : false;
  if(isLocal){
   console.log('Local link: '+url);
   if(pattern_protocol.test(url)){url = url.replace(pattern_protocol, '');}
   if(pattern_lochost.test(url)){url = url.replace(pattern_lochost, '');}
   //На выходе получаем ссылку без протокола, двойного слеша и домена. Т.е., например, "https://domain.com/page" -> "/page".
   //Это нужо делать, ибо если у нас сылка вида domain.com/page, то она честно отдаёт isLocal,
   //но открывается через жопу - domain.com/domain.com/page
   $.ajax({
    url: url,
    data: 'ajax=true',
    success: function(data){reload_page($.parseJSON(data));}
   });
   window.history.pushState(null, null, url);
   return false;
  }else{
   console.log('External link: '+url);
   //Если нет протокола или хотя бы двойного слеша, то нужно обязательно добавить, иначе откроется в новом окне, но как location.href/url (например, radio.loc/google.com)
   //Добавляем http://. В проследствие вторая сторона, если имеет https:// - сама перенаправит.
   url = (pattern_protocol.test(url)) ? url : 'http://'+url;
   window.open(url, '_blank');
  }
 });
 $(window).bind('popstate', function(){
  $.ajax({
   url: location.pathname+location.search,
   data: 'ajax=true',
   success: function(data){reload_page(data)}
  });
 });
});

Грубо говоря, стили ссылок, которые я отлавливаю, выглядят так:

a{
 text-decoration: none;
 font-family: Tahoma;
 display: inline-block;
 height: 18px;
 padding: 10px;
 /*Итого, 18px (высота контента ссылки) + по 10px паддинга по сторонам =
 = 38px - высота ссылки, из которой рабочая высота - 18px*/
}

Есть идея сделать так:

<a href="/page" style="/*Здесь нет ни паддинга, ни размера шрифта, ни-че-го*/">
 <div style="font-size: 18px; pagging: 10px;">Контент ссылки</div>
</a>

Но получится костыльно. Что делать? Спасибо заранее! P.S.: Переход по сайту без обновления страницы - принципиально важно.

На всякий случай, reload_page():

/**
 * Обновляет содержимое страницы (без перезагрузки)
 * @param  obj data:
 *        bool data.isErrorPage  - нужно для смены бекграунда
 *       mixed data.show_sidebar - true|false - показать/спрятать, "inherit" - не делать ничего
 *      string data.title
 *      string data.url
 */
function reload_page(data){
 var url = (data) ? data.url : location.pathname+location.search;
 console.log('url: '+url);
 if(data){
  console.log('returned data:');
  console.log(data);
  var current_bg = $('body').css('background-image');
  current_bg = current_bg.split('/');
  current_bg = current_bg[current_bg.length - 1];
  if(data.isErrorPage){
   if(current_bg==='background.png'){$('body').css('background-image', 'background-grayscale.png');}
  }else{
   if(current_bg!=='background.png'){$('body').css('background-image', 'background.png');}
  }
  $('title').html(data.title);
 }
 $('#menu .fr').load(url+' .notifications-menu, .user-menu');
 $('#content').load(url+' [trgt]');
 switch(data.show_sidebar){
  case  true: sidebar_show(); break;
  case false: sidebar_hide(); break;
  default: /*case "inherit": do nothing;*/ break;
 }
 console.log('done!');
}