Question

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

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

以下是我的尝试：

＆＃13;

(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);

})();

＆＃13;

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

＆＃13;

我已经添加了preventDefault和stopPropagation，但链接仍在继续。

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>

如何正确注册点击事件？

1 个答案: