Как найти то, что вызывает preventDefault, которое переопределяет нормальное поведение кликов

Я унаследовал некоторый большой кусок кода. Где-то внутри слишком обобщенного e.preventDefault() запрещается нормальное поведение якорного щелчка.

Я подумал о запуске профилировщика в веб-браузерах Chrome, чтобы узнать, что происходит при нажатии на определенную ссылку, в надежде отследить ее обратно в заявлении виновника. Однако мне не повезло

как я могу отследить (если возможно) инструкцию, которая переопределяет поведение обычного клика при нажатии ссылки в веб-браузере Chrome? (Я использую jQuery)

Ответы

Ответ 1

Вы можете переопределить Event.prototype.preventDefault и добавить оператор debugger в качестве первой строки.

Запустите следующую консоль.

var oldEPD = Event.prototype.preventDefault;
Event.prototype.preventDefault = function() {
    debugger;
    oldEPD.call(this);
};

Ответ 2

Основываясь на техническом ответе, здесь представлена современная и более продвинутая версия, которая весьма полезна для отладки проблем, связанных с событиями. Обратите внимание, что он ожидает, что вы используете современный env JS, такой как Webpack/Babel, но вы, безусловно, можете сделать ту же работу со старым синтаксисом JS.

Это в основном то же самое, кроме сообщения журнала, более удобно. Я пытаюсь вычислить "значимый селектор", который поможет вам отладить проблему:

click.stopPropagation() в разделе # nav-bar > a.Tappable-inactive.group-link.nav-bar-item.my-main-team > div.nav-bar-item-content > svg

// Logs all calls to preventDefault / stopPropagation in an user-friendly way
if ( process.env.NODE_ENV !== "production" ) {
  (function monkeyPatchEventMethods() {

    const logEventMethodCall = (event,methodName) => {
      const MinimumMeaninfulSelectors = 3; // how much meaningful items we want in log message
      const target = event.target;

      const selector = (function computeSelector() {
        const parentSelectors = [];
        let node = target;
        let minimumSelectors = 0;
        do {
          const meaningfulSelector = node.id ?
            `#${node.id}` : node.classList.length > 0 ?
              `.${Array.prototype.join.call(node.classList, '.')}` : undefined;
          if ( meaningfulSelector ) minimumSelectors++;
          const nodeSelector = `${node.tagName.toLowerCase()}${meaningfulSelector ? meaningfulSelector : ''}`;
          parentSelectors.unshift(nodeSelector);
          node = node.parentNode;
        } while (node && node !== document && minimumSelectors < MinimumMeaninfulSelectors);
        return parentSelectors.join(" > ");
      })();

      console.debug(`${event.type}.${methodName}() on ${selector}`,event);
    };

    const preventDefault = Event.prototype.preventDefault;
    Event.prototype.preventDefault = function() {
      logEventMethodCall(this,'preventDefault');
      preventDefault.call(this);
    };

    const stopPropagation = Event.prototype.stopPropagation;
    Event.prototype.stopPropagation = function() {
      logEventMethodCall(this,'stopPropagation');
      stopPropagation.call(this);
    };

  })();
}

https://gist.github.com/slorber/b1c0ffef56abd449c05476b5c609a36e

Ответ 3

В дополнение к различным ответам preventDefault() здесь вы также можете увидеть, есть ли в вашем HTML-коде, вы возвращаете false в свой обработчик событий OnClick, например:

<a href="#" onclick="DoSomething(); return false;"></a>

Если вы это сделаете, просто удалите его (It true по умолчанию):

<a href="#" onclick="DoSomething()"></a>

Ответ 4

Возможно, найдите свой код на e.preventDefault и добавьте точку останова в эту строку. Вы можете прочитать стек вызовов, когда точка останова запускается, и вы можете увидеть, какой код переопределяет клик.