javascript - Click event on DIV button -

javascript - Click event on DIV button -

i have div element using javascript button. works fine unless click on area, click event not triggered @ all. seems issue in 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/

clicking anywhere on button works fine unless click text begins on left. in case of fiddle, click on left side of letter "c". you'll see event doesn't fire. although little area, seems click every time.

i have tried everything. i'm guessing it's problem text node accepting click , it's not propagating it's parent? ideas how might work around issue?

the problem appears "attempt" select text.

add css:

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

fiddle update worked in chrome me:

http://jsfiddle.net/uwgk4/1/

also thought. can alter body ever prevent "button" text beingness selectable.

updated:

tell me if can break this! haven't been able too. basicly removed padding, declared hieght , width, wrapped close in <div> class called .label , set margins.

http://jsfiddle.net/uwgk4/5/

new js:

.label{ margin: 5px; }

new html:

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

removed padding css .button , .button:active.

javascript jquery css