javascript - Depuração do Chrome-pausa no próximo evento de clique




debugging google-chrome google-chrome-devtools (2)

Nós temos um botão. Os eventos de clique são manipulados por uma estrutura de terceiros, no entanto, a estrutura é de certa forma bugs.

Queremos depurar o framework, no entanto, não sabemos onde o código do manipulador de eventos correspondente reside para definir um ponto de interrupção. Como geralmente "interromper o evento do próximo clique" e ver onde e como esse clique é tratado pela estrutura de terceiros?


Answers

O que você está procurando são ' Pontos de Interrupção do Listener de Eventos ' na guia Sources . Esses pontos de interrupção são acionados sempre que qualquer ouvinte de evento, que escuta o evento escolhido, é disparado. Você os encontrará na guia Origens. No seu caso, expanda a categoria 'Mouse' e escolha 'Click'.


Veja por que elementos criados dinamicamente não respondem a cliques:

var body = $("body");
var btns = $("button");
var btnB = $("<button>B</button>");
// `<button>B</button>` is not yet in the document.
// Thus, `$("button")` gives `[<button>A</button>]`.
// Only `<button>A</button>` gets a click listener.
btns.on("click", function () {
  console.log(this);
});
// Too late for `<button>B</button>`...
body.append(btnB);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

Como solução alternativa, você precisa ouvir todos os cliques e verificar o elemento de origem:

var body = $("body");
var btnB = $("<button>B</button>");
var btnC = $("<button>C</button>");
// Listen to all clicks and
// check if the source element
// is a `<button></button>`.
body.on("click", function (ev) {
  if ($(ev.target).is("button")) {
    console.log(ev.target);
  }
});
// Now you can add any number
// of `<button></button>`.
body.append(btnB);
body.append(btnC);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

Isso é chamado de "Delegação de Eventos". Boas notícias, é um recurso embutido no jQuery :-)

var i = 11;
var body = $("body");
body.on("click", "button", function () {
  var letter = (i++).toString(36).toUpperCase();
  body.append($("<button>" + letter + "</button>"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>





javascript debugging google-chrome google-chrome-devtools