javascript - Stop clicking on text from cancelling selection -

i'm trying make simple rich text editor, , i'm getting stuck @ stupidest thing. bold buttons, instead of having button, i'm trying make that, near top of screen, there several spans, , each 1 has thing can text, such bold, italic, underline, etc, , when click on 1 want toggle if selected text in contenteditable div bold, italic, or underline. basically, instead of buttons, want click on span toggle things.

so put whole bunch of spans in right place , put event handlers on them did appropriate execcommand. however, when user clicks on spans, cancels selection in contenteditable div, execcommand doesn't anything. tried setting css user-select none (i used prefixes), cancelling selectstart event, cancelling click event, still cancels selection when click on it

you can see jsfiddle here

i don't want use button instead of span or anything. don't want in hacky way (such copying selection on input, , recreating selection after click) either

there's few ways achieve this. can prevent default mousedown behaviour below:

document.getelementbyid('bold').addeventlistener('mousedown', function (e) {     e.preventdefault(); }); 

fiddle

you can use semantically correct elements such <button> rather <span>. if not way <button> element looks default re-style it.

fiddle