javascript - preventDefault() on a multiselect, different behavior on FF - IE - Chrome -

i'm struggling mouse events on select multiple. didn't expect difference in behavior across browsers in 2015...

i'm trying simulate ctrl+click click, easy use. working on chrome, using preventdefault(), cancelling default behaviour (select current option , deselect others)

select.addeventlistener('mousedown', function(evt) {             evt.preventdefault();             evt.target.selected = !evt.target.selected;      return false; }, true); 

here fiddle, can check different browsers: https://jsfiddle.net/fzvkw1xv/

• chrome -> works expected
• ff -> it's preventdefault() doesn't anything. other options unchecked.
• ie 11 -> no option selected @ all

what want achieve full control on multiselect make better user experience.

i couldn't find documentation related this, don't know browser buggy one, or standard expected behavior is. info on appreciated. i'm starting think making checkboxes multiselect box.

thanks

different browsers has different ways handle events.

there event bubbling besides event capturing. need stop too.

discover event propagation model: http://javascript.info/tutorial/bubbling-and-capturing

try more wide solution:

function (event) {   event = event || window.event // cross-browser event    event.preventdefault(); // stop event capturing    // stop event bubbling   if (event.stoppropagation) { // w3c standard variant       event.stoppropagation();   } else { // ie variant       event.cancelbubble = true   }    return false; } 

http://javascript.info/tutorial/default-browser-action