如何正确注册点击事件？

Question

我正在尝试在将触发一次的元素上注册一个新的点击事件，运行它的代码然后执行任何其他绑定事件或默认方法。

例如：用户单击一个锚点，一个函数将执行，一旦完成，锚点将继续其默认行为。理想情况下，这应该首先执行我的功能，以防有其他点击事件绑定到锚点。

这是我正在尝试的：

(function() {

  // Link
  var anchor = document.querySelector('a.selector');

  // Helpers
  Element.prototype.hasClass = function(className) {
    return this.className && new RegExp("(^|\s)" + className + "(\s|$)").test(this.className);
  };

  Element.prototype.addClass = function(className) {
    return this.className = this.className + " " + className;
  };

  // Click function
  var someFunction = function() {

    if (this.hasClass('clicked')) {
      return true;
    }

    // Prevent default behavior
    this.preventDefault();
    this.stopPropagation();
    
    // Run some code...
    this.addClass('clicked');
    this.click();
    
    return false;
  };

  anchor.addEventListener('click', someFunction);

})();

<a href="//google.com" class="selector">Google</a>

我已经添加了 preventDefault 和 stopPropagation，但 link 对我来说仍然继续。

Answer 1

我试图在元素上调用 preventDefault 和 stopPropagation，而不是在事件上。

解决方案是：

(function() {

  // Link
  var anchor = document.querySelector('a.selector');

  // Helpers
  Element.prototype.hasClass = function(className) {
    return this.className && new RegExp("(^|\s)" + className + "(\s|$)").test(this.className);
  };

  Element.prototype.addClass = function(className) {
    return this.className = this.className + " " + className;
  };

  // Click function
  var someFunction = function(event) {

    if (this.hasClass('clicked')) {
      return true;
    }

    // Prevent default behavior
    event.preventDefault();
    event.stopPropagation();
    
    // Run some code...

    // Add clicked class and recall the click
    this.addClass('clicked');
    this.click();
    
    return false;
  };

  anchor.addEventListener('click', someFunction);

})();

<a href="//google.com" class="selector">Google</a>

如何正确注册点击事件？

How can I properly register click events?

javascript

javascript-events