Javascript 如何找到导致覆盖正常单击行为的默认值的原因

我继承了一些大的代码。在一种过于普遍化的方式中，preventDefault（）禁止锚点击的正常行为

我考虑在Chrome webtools中运行profiler，查看单击某个特定链接时发生的情况，希望能够将其追溯到罪魁祸首的陈述。但是我运气不太好

在Chrome webtools中单击链接时，如何追溯（如果可能）覆盖正常单击行为的语句？

---

（我正在使用jQuery）

也许可以在

e.preventDefault

上搜索您的代码，并在该行添加断点。当触发断点时，您可以读取调用堆栈，您可能可以看到哪些代码覆盖了单击。

除了这里的各种

preventDefault（）

答案之外，您还可以看到在HTML代码中，您是否在链接的

OnClick

事件处理程序中返回

false

，如下所示：

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

---

您应该能够重写

事件.prototype.preventDefault

，并添加

调试器

语句作为其第一行

通过控制台运行以下命令

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

---

基于techfoobar的回答，这里有一个现代的、更高级的版本，对于调试事件相关问题非常有用。注意，它希望您使用现代的env-JS，比如Webpack/Babel，但是您当然可以使用旧的JS语法来完成同样的工作

它基本上是一样的，只是日志消息更加用户友好。我尝试计算一个“有意义的选择器”，它将帮助您调试问题：

单击#导航栏>a.Tappable-inactive.group-link.nav-bar-item.my-main-team>div.nav-bar-item-content>svg部分的.stopPropagation（）

//以用户友好的方式记录所有preventDefault/stopPropagation调用
if（process.env.NODE_env！=“生产”）{
（函数monkeyPatchEventMethods（）{
const logEventMethodCall=（事件，方法名）=>{
const MinimumMeaninfulSelectors=3；//我们希望在日志消息中包含多少有意义的项
const target=event.target；
常量选择器=（函数computeSelector（）{
常量parentSelectors=[]；
让节点=目标；
设最小选择器=0；
做{
const meaningfulSelector=node.id？
`#${node.id}`:node.classList.length>0？
`.${Array.prototype.join.call（node.classList，'.'）}`：未定义；
如果（有意义的选择器）最小选择器++；
const nodeSelector=`${node.tagName.toLowerCase（）}${meaningfulSelector？meaningfulSelector:'}`；
父选择器。取消移位（节点选择器）；
node=node.parentNode；
}while（node&&node！==document&&minimumSelectors”）；
})();
调试（${selector}`，event上的`${event.type}.${methodName}（））；
};
const preventDefault=Event.prototype.preventDefault；
Event.prototype.preventDefault=函数（）{
logEventMethodCall（这是“preventDefault”）；
调用（this）；
};
const stopPropagation=Event.prototype.stopPropagation；
Event.prototype.stopPropagation=函数（）{
logEventMethodCall（这是“stopPropagation”）；
停止播放。调用（此）；
};
})();
}

---

当然，我也想这么做-但我想知道是否有可能使用事件探查器或时间线来真正追溯违规行。真棒的东西，在一分钟内找到违规语句。真棒。。。节省了我的时间这可以应用于调试许多其他问题！非常感谢。你是一个怪胎般的天才非常感谢你…你是…上帝

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

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

  })();
}