當我使用Javascript添加新的CSS樣式時，那里的JS停止工作

Question

我有一個JavaScript待辦事項列表，直到將以下代碼添加到該任務列表為止。 風格。 （整個代碼保存在https://codepen.io/hmcka/pen/vYBgZVN ）。 是的，我想使用純JS。

function toggleShimmer(e) {
    box.classList.add("shimmer");
}

我不明白為什么原來的內容無法正常工作，但是我想知道這與我要添加的CSS附加到包裝器並且JavaScript附加到包裝器中的項目有關。

我已經嘗試了一些方法來解決此問題。 首先，我嘗試在add.classList上放置一個計時器，以便以后可以刪除樣式。 但是，當我執行此操作時，單擊復選框將再次顯示該樣式。 我嘗試做的另一件事是調整列表項的z索引。

任何建議將由這個初學者贊賞。

 const addItems = document.querySelector('.add-items'); const itemsList = document.querySelector('.plates'); const items = JSON.parse(localStorage.getItem('items')) || []; const box = document.querySelector('#rectWrapper'); function addItem(e) { e.preventDefault(); const text = (this.querySelector('[name=item]')).value; const item = { text, done: false }; items.push(item); populateList(items, itemsList); localStorage.setItem('items', JSON.stringify(items)); this.reset(); } function populateList(plates = [], platesList) { platesList.innerHTML = plates.map((plate, i) => { return ` <li> <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} /> <label for="item${i}">${plate.text}</label> </li> `; }).join(''); } function toggleDone(e) { if (!e.target.matches('input')) return; // skip this unless it's an input const el = e.target; const index = el.dataset.index; items[index].done = !items[index].done; localStorage.setItem('items', JSON.stringify(items)); populateList(items, itemsList); } function toggleShimmer(e) { box.classList.add("shimmer"); } window.addEventListener("load", toggleShimmer); box.addEventListener('mouseenter', toggleShimmer); addItems.addEventListener('submit', addItem); itemsList.addEventListener('click', toggleDone); populateList(items, itemsList); 

 html { /* background-color: #B01E84B01E84; */ background: rgba(153, 25, 117, 1); background: -moz-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%); background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(153, 25, 117, 1)), color-stop(100%, rgba(212, 19, 157, 1))); background: -webkit-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%); background: -o-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%); background: -ms-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%); background: linear-gradient(135deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%); box-sizing: border-box; /* background: url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat; */ /* background-size: cover; */ min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; font-family: Futura, "Trebuchet MS", Arial, sans-serif; } *, *:before, *:after { box-sizing: inherit; } /* svg { fill:white; background: rgba(0,0,0,0.1); padding: 20px; border-radius: 50%; width: 200px; margin-bottom: 50px; } */ .wrapper { padding: 20px; max-width: 350px; background-color: #7A0857; box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); } .shimmer { position: relative; overflow: hidden; /* width: 50px; */ /* height: 50px; */ display: inline-block; /* margin: 25px 0 25px 25px; */ /* border-radius: 5px; */ color: #fff; } /*The "shine" element */ .shimmer:after { content: ""; position: absolute; top: -110%; left: -210%; width: 200%; height: 200%; opacity: 0; transform: rotate(30deg); background: rgba(255, 255, 255, 0.13); background: linear-gradient( to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%); /* display: none; */ display: block; /* display: inline; */ } /* Hover state - trigger effect */ .shimmer:hover:after { opacity: 1; top: -40%; left: -40%; transition-property: left, top, opacity; transition-duration: 1.4s, 1.4s, 0.3s; transition-timing-function: ease; } /* Active state */ .shimmer:active:after { opacity: 0; } h2 { text-align: center; margin: 0; font-weight: 200; } .plates { margin: 0; padding: 0; text-align: left; list-style: none; } .plates li { border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding: 10px 0; font-weight: 100; display: flex; } .plates label { flex: 1; cursor: pointer; } .plates input { display: none; } .plates input+label:before { content: '⬜️'; margin-right: 10px; } .plates input:checked+label:before { content: '🌮'; } .add-items { margin-top: 20px; } .add-items input { padding: 10px; outline: 0; border: 1px solid rgba(0, 0, 0, 0.1); } 

 <div id="rectWrapper" class="wrapper"> <h2>TO-DO LIST</h2> <p></p> <ul class="plates"> <li>Loading Tapas...</li> </ul> <form class="add-items"> <input type="text" name="item" placeholder="Item Name" required> <input type="submit" value="+ Add Item"> </form> </div> 

Answer 1

表單上方有一個偽元素（ shimmer:after ），可防止您單擊輸入字段或添加按鈕。

最簡單的解決方案是使用pointer-events使微光對鼠標事件“透明”：

.shimmer:after {
  pointer-events: none;
}