Нажмите событие на кнопке DIV

Question

У меня есть элемент DIV, который я использую в качестве кнопки javascript. Он отлично работает, если я не нажимаю на определенную область, тогда событие click не запускается вообще. Кажется, это только проблема в Chrome.

HTML

<div class="button">Close</div> 

Javascript

$('.button').on('click', function(e) { 
    var currentDate = new Date(); 
    $debug.html('Clicked: ' + currentDate.getMinutes() + ':' + currentDate.getSeconds() + ':' + currentDate.getMilliseconds()); 
}); 

http://jsfiddle.net/cellenburg/uwGK4/

Щелкая по кнопке отлично работает, если вы не нажмете именно там, где текст начинается слева. В случае с моей скрипкой щелкните по левой стороне буквы «C». Вы увидите, что событие не срабатывает. Хотя это небольшая область, кажется, что я нажимаю ее почти каждый раз.

Я пробовал все. Я предполагаю, что это просто проблема с текстовым узлом, принимающим клик, и он не распространяется на его родителя? Любые идеи, как я могу обойти эту проблему?

Answer 1

Проблема заключается в попытке выбрать текст.

Добавьте это в CSS:

body { 
    -moz-user-select: -moz-none; 
    -webkit-user-select: none; 
} 

обновление Fiddle работал в хроме для меня:

http://jsfiddle.net/uwGK4/1/

Также только мысль. Вы можете изменить его с тела на то, что когда-либо, чтобы просто запретить ваш текст «кнопки» быть выбранным.

Обновлено:

Скажите мне, если вы можете разбить это! Я тоже не смог. В основном я удалял прописку, объявлял hieght и ширину, завернул Close в <div> с классом .label и установил его поля.

http://jsfiddle.net/uwGK4/5/

Новый JS:

.label{ 
    margin: 5px; 
} 

Новый HTML:

<div class="button"><div class="label">Close</div></div> 

Удалены обивка CSS от .button и .button:active.

Answer 2

Попробуйте удалить изменение дополнений из: активного события. Я думаю, что перемещение начала текста во время нажатия на него вызывает какое-то странное поведение. Я признаю, что он меняет внешний вид кнопки, которая является немного хромой.

Также попробуйте сделать набивку очень высокой (например, padding:60px 90px 40px 110px;). Вы должны увидеть, что щелчок в любом месте самого текста кажется более похожим на действие перетаскивания, чем действие с кликом.

Кстати, это происходит и в Safari для окон, поэтому я предполагаю, что это вещь WebKit.

Возможно, стоит подать отчет об ошибке.