鍍金池/ 問(wèn)答/HTML/ shift鍵按下時(shí),模擬多選下拉框,但每個(gè)選項(xiàng)的文字也被選中的默認(rèn)行為怎么取消?

shift鍵按下時(shí),模擬多選下拉框,但每個(gè)選項(xiàng)的文字也被選中的默認(rèn)行為怎么取消?

圖片描述


   var oShow = document.getElementById('selected'),
                oUl = document.getElementById('list'),
                ev = event || window.event,
                arr = [],
                aLi = oUl.getElementsByTagName('li');

            document.onclick = function () {
                oUl.style.display = 'none';
                //清空上次選中的選項(xiàng)
                arr = [];
            }

            oShow.onclick = function (ev) {
                oUl.style.display = 'block';
                //觸發(fā)了document的onclick事件,oUl無(wú)法顯示,需要取消事件捕獲
                ev.stopPropagation();
            }
            for (let i = 0; i < aLi.length; i++) {
                aLi[i].onclick = function (ev) {
                    if (ev.shiftKey) {
                        ev.stopPropagation();
                        ev.returnValue=false;
                    }
                     
                    for (let j = 0; j < arr.length; j++) {
                        if (arr[j] == this.innerHTML) {
                            arr.splice(j, 1);
                            oShow.innerHTML = arr.join(',');
                            setBgColor();
                            return;
                        }

                    }
                    
                    arr.push(this.innerHTML);
                    oShow.innerHTML = arr.join(',');
                    setBgColor();
                }
                //將被選中的li的背景和字體顏色設(shè)置高亮
                function setBgColor() {
                    for (let j = 0; j < aLi.length; j++) {
                        aLi[j].className = '';
                    }
                    var arr1 = oShow.innerHTML.split(',');
                    for (let i = 0; i < arr1.length; i++) {
                        for (let j = 0; j < aLi.length; j++) {
                            if (arr1[i] == aLi[j].innerHTML) {
                                aLi[j].className = 'active';
                            }
                        }
                    }
                }
            }
        }

用了ev.preventDefault(),return fasle等N種辦法都不可以,這是為什么??求教,研究很久了...

回答
編輯回答
厭遇

試試在CSS里加上user-select: none;

2018年3月16日 06:30