如何找到造成妨礙正常點擊行爲的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的問題

回答

相關問題