css - Javascript buttons, prevent mouse double click -

i have 2 buttons use javascript call function controls carousel , other actions.

i'd disable ability of user doubleclick button.

here code:

var onrightarrow = function(e) {     //alert("right");     if (unitctr<=unittotal) {         unitctr++;         tweenlite.to(producttxt, 0.2, {y: "-="+unitheight });         tweenlite.to(productimg, 0.2, {y: "-="+unitheight });     }     hidearrows(); }, onleftarrow = function(e) {     //alert("left");     if (unitctr>1) {         unitctr--;         tweenlite.to(producttxt, 0.2, {y: "+="+unitheight });         tweenlite.to(productimg, 0.2, {y: "+="+unitheight });     }     hidearrows(); }  arrowright.addeventlistener('click', onrightarrow, false); arrowleft.addeventlistener('click', onleftarrow, false); 

i'm aware of dblclick line of code not sure how apply disable double click action mouse.

when user doubleclicks now, misplaces positioning of elements in carousel why want remove ability of dblclick affect button.

thanks in advance advice. please avoid providing answers in jquery.

more code: http://codepen.io/anon/pen/qjgydw

i solved myself, while answer more complex, looking apply listeners disable ability doubleclick, it's here:

(arrowright , arrowleft variables have been defined id)

arrowright.addeventlistener('dblclick', function(e){     e.preventdefault();     });     arrowleft.addeventlistener('dblclick', function(e){     e.preventdefault();     }); 

i created functions disable arrow while animation happening prevent errors. reenables after animation completes. functions this:

function disablearrows() { //added new function disable arrows     arrowright.removeeventlistener('click', ontoparrow, false);     arrowleft.removeeventlistener('click', onbottomarrow, false); }  function enablearrows() { //added new function re-enable arrows     arrowright.addeventlistener('click', ontoparrow, false);     arrowleft.addeventlistener('click', onbottomarrow, false); }