Как я могу устранить мертвую зону на кнопке с положением относительно? (HTML / CSS)

Question

Недавно я заметил проблему со стилизованными тегами <a> и <button>, которая возникает с блоком отображения или встроенным блоком, некоторым количеством отступов и положением относительно регулировки позиции, когда: активно, например,

a { display: inline-block; padding: 3px 6px; background: #aff; }
a:active { position: relative; top: 1px; left: 1px; }

Проблема заключается в невидимом поле размером 1 пиксель вокруг текста, где щелчок не регистрируется браузером или JavaScript, однако анимация все еще происходит. Это происходит в (по крайней мере) Firefox и Chrome в Windows.

Вот рабочий пример: http://dl.dropbox.com/u/1186571/Test.htm

Я также попытался использовать поле вместо position: relative;, а также попытался установить .active с помощью javascript вместо :active.

Просто чтобы прояснить: я говорю о мертвой зоне внутри ссылки (синяя рамка в моем примере), но за пределами ограничительной рамки текста. Вот изображение с областью, о которой я говорю, выделено синим цветом:

http://dl.dropbox.com/u/1186571/example.png

Answer 1

Когда ссылка активна, вы удаляете ее, чтобы больше не нажимать на ссылку. Использование этого решит проблему:

a:active { 
    padding: 4px 5px 2px 7px;
}

См. http://jsfiddle.net/ZCkpE/5/ (спасибо Кевину Герни за создание исходного кода)

Обновление:

Кажется, ошибка (или предполагаемое поведение) в браузере. W3.org определение события клика:

Событие щелчка происходит, когда кнопка указательного устройства нажата элемент. Клик определяется как mousedown и mouseup над тем же расположение экрана. Последовательность этих События:

1. MouseDown
2. MouseUp
3. нажмите

Вы явно нажимаете на то же место на экране. Проблема заключается в том, что событие mousedown находится в заполнении ссылки, а событие mouseup - в ссылке (текст).

См. http://jsfiddle.net/ZCkpE/8/.

• Если вы наведете курсор мыши на отступ , переместите мышь и наведите курсор мыши на заполнение , щелчок запускает событие.
• Если вы наведете курсор мыши на отступ , переместите мышь, но теперь наведите курсор мыши на текст , событие щелчка не произойдет.

Это означает, что событие click и сам текст не обрабатываются как один и тот же элемент.

Решение без слишком большого "взлома": создайте наложенный div: http://jsfiddle.net/ZCkpE/13/. Работает в Chrome, Firefox. В IE это работает, если нажать на текст. Если вы нажмете на отступ, стиль: active не активируется.

Answer 2

Благодаря @zzzzBov и @Ryan Kinal у меня есть разумное решение - обойти событие click для тегов a и использовать вместо него mouseup:

$("a").click(false).mouseup(function() { window.location = $(this).attr('href'); });

Более сложный (иболее точным) решением было бы воссоздать событие click с помощью плагина jQuery:

(function($) {
  $.fn.newClick = function(fn) {
    if (fn === undefined) { 
      fn = function() { window.location = $(this).attr("href"); }; 
    }
    this.click(false);
    this.mousedown(function() {
      $(this).data("clicked", true);
    });
    this.mouseup(function(e) {
      var response = true;
      if ($(this).data("clicked")) {
        response = fn.call($(this), e);
      }
      $(this).data("clicked", false);
      return response; 
    });
  };
})(jQuery);

$(document).ready(function() {
  $("a.js").newClick(function(e) {
    $("p").text($("p").text() + " clicked!");
    return false;
  });
  $("a").newClick();
});

Здесь мы сначала привязываем любые пользовательские события, а затем, наконец, переопределяем поведение по умолчанию для всех тегов a.Вот демо:

http://jsfiddle.net/ZCkpE/16/

Answer 3

Это ужасный и уродливый хак, но вы можете сделать что-то вроде этого: вместо перемещения самого элемента ссылки или чего-то внутри него, переместите отдельную ссылку с тем же текстом, который вы размещаете в том же месте. Конечно, вам также придется скрыть фактическую ссылку. Требуется много дополнительной разметки, и перемещение может быть сделано только в JavaScript, но, по крайней мере, это может быть сделано и работает.

HTML:

<span class="link_container"><a href="#" class="main"><span>Click me</span></a> 
<span class="replacement"><a href="#" class="aux"><span>Click me</span></a></span></span>

CSS:

.link_container { display: inline-block; position: relative; }
a.main { display:inline-block; position: relative; z-index: 2; }
a.main span { position: relative; top: -1000px; }
.link_container span.replacement { position: absolute; left: 0; top: 0; z-index: 1; }
.link_container span.replacement span { display: inline-block; background-color: #fab; }
.link_container span.replacement span.offset { position: relative; left: 5px; top: 5px; }

JS, который перемещает текст при каждом нажатии:

$(document).ready(function() { 
$("a").click(function() {
    $("span.replacement span").toggleClass("offset");
    $("p").text($("p").text()+" clicked!");
    return false; 
});
});

http://jsfiddle.net/Vfc5r/36/

Протестировано в Chrome и IE8. Chrome реагирует на ссылку .main, а IE8 на ссылку .aux. Возможно, это не исправляет проблемы в браузерах, которые по-прежнему реагируют на перемещенную ссылку, но является улучшением в браузерах, которые реагируют на статическую ссылку.