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>

JavaScript仅允许用户单击一次

2 个答案: