如何找到造成妨碍正常点击行为的preventDefault的问题

我已经继承了一些大的代码。在某种程度上过于普遍的方式e.preventDefault()正在禁止锚点击的正常行为。如何找到造成妨碍正常点击行为的preventDefault的问题

我想到了在Chrome webtools中运行分析器来查看点击特定链接时发生了什么，希望能够追溯到罪魁祸首。然而，我没有多少运气

当点击Chrome webtools中的链接时，如何追溯（如果可能）重写正常点击行为的语句？（我正在使用jQuery）

2013-12-10 Marco

你应该能够覆盖Event.prototype.preventDefault并添加debugger语句作为第一行。

通过控制台运行以下命令。

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

来源

2013-12-10 09:54:41 techfoobar

可怕的东西，在一分钟内发现有问题的声明。 – Marco

好极了！........ –

真棒...救了我的时间 – Zain

-1

也许在e.preventDefault上搜索您的代码并在该行中添加一个断点。您可以在触发断点时读取调用堆栈，并且可以查看哪些代码覆盖了点击。

来源

2013-12-10 09:46:14 Haneev

当然，要做到这一点作为良好，但我想知道是否可以使用分析器或时间线来真正追溯违规线路。 – Marco

在这里除了各种preventDefault()答案，你也可以看到，如果在你的HTML代码，你回来false在你的链接的OnClick事件处理程序，这样的：

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

如果你这样做，只是将其删除（默认情况下它是true）：

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

来源

2013-12-10 09:51:59

基于techfoobar的答案，这里是现代和更高级的版本，这是非常有用的调试事件相关的问题。请注意，它期望您使用像Webpack/Babel这样的现代env JS，但您可以使用较老的JS语法来完成相同的工作。

除了日志消息更方便用户之外，它基本上是一样的。我尝试计算一个“有意义的选择器”，它将帮助您调试问题：

click.stopPropagation（）on section＃nav-bar> a.Tappable-inactive.group-link.nav-bar-item 。我 - 主 - 团队> div.nav条项内容> 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

来源

2017-03-06 16:08:16

如何找到造成妨碍正常点击行为的preventDefault的问题

回答

相关问题