通常のクリック動作を無効にするpreventDefaultの原因を見つける方法

Question

大きなコードを継承しました。あまりにも一般化された道のどこかで、e.preventDefault()はアンカークリックの通常の動作を禁止しています。

私は、特定のリンクをクリックしたときに起こっていることを知るために、クロールWebツールでプロファイラを実行することを考えました。しかし、私は多くの運がなかった

Chromeウェブツールのリンクをクリックすると、通常のクリックの動作を無効にするステートメントをどのように戻すことができますか？ （私はjQueryを使用しています）

Answer 1

あなたはEvent.prototype.preventDefaultをオーバーライドし、その最初の行としてdebuggerステートメントを追加することができるはずです。

コンソールから次のコマンドを実行します。

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

Answer 2

e.preventDefaultでコードを検索し、その行にブレークポイントを追加することがあります。ブレークポイントがトリガーされたときにコールスタックを読み取ることができます。また、どのコードがクリックをオーバーライドするかを知ることができます。

Answer 3

ここで様々なpreventDefault()の回答に加えて、あなたのHTMLコードでは、あなたがそのように、あなたのリンクのOnClickイベントハンドラでfalseを返している場合、あなたも見ることができます：

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

そうした場合、ちょうど（それはデフォルトでtrueです）、それを削除します。

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

Answer 4

techfoobarの回答に基づいて、イベント関連の問題をデバッグするのに非常に便利な最新の高度なバージョンです。 Webpack/Babelのような現代的なenv JSを使用することが期待されていますが、古いJS構文でも同じ作業を行うことができます。

ログメッセージがユーザーにとって使いやすいという点を除いて基本的には同じです。部＃のナビゲーション・バー> a.Tappable-inactive.group-link.navバー項目に（）

click.stopPropagation：私はあなたが問題のデバッグに役立つ「意味のあるセレクター」を計算してみてください.MY-メインチーム> 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