JavaScript僅允許用戶單擊一次

Question

我需要將其轉換為原始JavaScript，以僅允許用戶單擊一次並防止在Analytics（分析）中記錄多次點擊。

jQuery的

$('.test-link').one("click", function() {
    $(this).click(function() {
        return false;
    });
});

<a class="test" data-label="track-this-link">Click</a>

我不能使用jQuery，所以任何幫助都會很棒！ 謝謝。

Answer 1

在現代瀏覽器中， addEventListener接受一個options對象，該對象可以包含once屬性-如果設置為true ，則偵聽器僅觸發一次，此后將自動刪除它：

 document.querySelector('.test').addEventListener( 'click', () => { console.log('listener running'); return false; }, { once: true } ); 

 <a class="test" data-label="track-this-link">Click</a> 

如果沒有once ，請使用removeEventListener手動進行：

 const test = document.querySelector('.test'); function listener() { console.log('listener running'); test.removeEventListener('click', listener); return false; } test.addEventListener('click', listener); 

 <a class="test" data-label="track-this-link">Click</a> 

Answer 2

這是針對多個元素的

IE 9+

 var testEls = document.querySelectorAll('.test') function clickHandler() { console.log('click'); this.removeEventListener('click', clickHandler) return false; } Array.from(testEls).forEach(function(el) { el.addEventListener('click', clickHandler) }) 

 <a class="test" data-label="track-this-link">Click</a><br> <a class="test" data-label="track-this-link">Click</a><br> <a class="test" data-label="track-this-link">Click</a><br> <a class="test" data-label="track-this-link">Click</a> 

允許不同的事件類型

 function oneEvent(selector, type, handler) { var elms = document.querySelectorAll(selector); var closure = handler var tmpFunc = function(handler) { closure() this.removeEventListener(type, tmpFunc) } for(var i = 0; i < elms.length; i++) { elms[i].addEventListener(type, tmpFunc) } } function clickFunction() { console.log('click') } oneEvent('.test', 'click', clickFunction) 

 <a class="test" data-label="track-this-link">Click</a><br> <a class="test" data-label="track-this-link">Click</a><br> <a class="test" data-label="track-this-link">Click</a><br> <a class="test" data-label="track-this-link">Click</a>