Javascript возвращает false и event.target

Может ли кто-нибудь объяснить, почему нажатие на button1 не фиксируется? Я знаю, что return false при событии click остановит распространение, но он все равно должен захватить элемент с помощью document.addEventListener('click', function(e) {console.log(e.target);});, потому что мы пытаемся захватить непосредственно основной элемент через e.target, а не его родительский элемент.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#button1").click(function(){
       return false;
    });
});
</script>
</head>
<body>

<button id="button1">Button1 (dont get captured)</button>
<button id="button2">Button2 (get captured)</button>

  <script>
    document.addEventListener('click', function(e) { 
     console.log(e.target);});
  </script>
</body>
</html>

Я не могу изменить этот код jQuery $("#button1").click(function(){return false});, но все же хочу захватить элемент button1 при нажатии (с помощью javascript), есть ли обходной путь?

Я мог бы привязать другой обработчик событий к button1, как этот document.getElementById("button1").addEventListener("click", function(e){console.log(e.target)});, на самом деле есть много элементов, которые я хочу захватить (с разными классами и идентификаторами), было бы непрактично добавлять прослушиватель событий к каждому из них, я показал только одну кнопку для примера. , Я просто хочу записать, какой бы элемент ни был нажат.

Я не могу изменить код jQuery или HTML страницы, я хочу запустить некоторые тесты только в консоли Chrome, для чего я хочу захватить каждый элемент, который был нажат

Благодарность

событие не дойдет до документа, оно остановится только на кнопке

ashish singh 10.09.2018 10:24

Используйте W3C DOM Event API вместо jQuery. поскольку Event API позволяет продолжить распространение, не допуская действия по умолчанию.

Dai 10.09.2018 10:26

@ashishsingh спасибо, не могли бы вы объяснить это немного подробнее в ответе, спасибо

user9050678 10.09.2018 10:28

@ Дай, извини, я не могу использовать jQuery, есть ли обходной путь с javascript?

user9050678 10.09.2018 10:28

@ user9050678 то, что предлагает dai, - это нет использовать jquery

Federico klez Culloca 10.09.2018 10:29

@FedericoklezCulloca, о, извините, я не могу изменить этот код jQuery, но все же хочу захватить элемент button1, когда он был нажат с помощью javascript, есть ли обходной путь ?, спасибо

user9050678 10.09.2018 10:32

Что ты имеешь в виду? Попробуйте поместить журнал в обработчик кликов button1.

evolutionxbox 10.09.2018 10:35

@evolutionxbox на самом деле фактический код намного сложнее, я не могу изменить фактический код, поэтому не могу изменить этот код jQuery $("#button1").click(function(){return false}); и не могу внести никаких изменений в тег кнопки <button id ="button1">button1</button>, но я хочу выполнить некоторые тесты в Google Chrome консоль, поэтому я хочу захватить этот button1, когда он нажимается в chrome console, и, кроме того, я хочу использовать проверенный код в GTM (диспетчер тегов Google)

user9050678 10.09.2018 10:43
$("#button1").click(function(){ console.log(this.id,"clicked") }); также добавит обработчик событий
mplungjan 10.09.2018 10:48

@mplungjan, я подумал об этом, но я не могу его использовать, потому что есть много элементов, которые я хочу захватить (с разными классами и идентификаторами), было бы непрактично добавлять прослушиватель событий к каждому из них, я показал один button просто для примера. , Я просто хочу log, какой бы элемент ни был нажат, извините, я должен был упомянуть, что в вопросе

user9050678 10.09.2018 10:54
$(document).click(function(e){ console.log(e.target.id,"clicked") });
mplungjan 10.09.2018 11:04

@mplungjan $(document).click(function(e){ console.log(e.target.id,"clicked") }); не работает, это мой вопрос

user9050678 10.09.2018 11:23
0
12
763
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Возвращение false; запрещает браузеру выполнять действие по умолчанию для ссылки button1.

Эквивалентный код для return false:

$('.button1')
   .click(function (event) {
       event.preventDefault();
       event.stopPropagation();
});

Если вы просто хотите остановить распространение, используйте stopPropagation().

Взгляните на это и узнайте больше о preventDefault () и stopPropagation ()

спасибо, но я не могу изменить код jQuery или HTML страницы, я хочу запустить некоторые тесты только в консоли Chrome, для чего я хочу захватить каждый элемент, который был нажат

user9050678 10.09.2018 11:14

Это невозможно, поскольку вы предотвращаете событие щелчка на кнопке 1. Определенно.

Meziane 10.09.2018 11:23

хорошо, спасибо за помощь, давайте посмотрим, может ли кто-нибудь предоставить обходной путь

user9050678 10.09.2018 11:28

Не очень эффективно, но сработало для меня

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#button1").click(function(){
       return false;
    });
});
</script>
</head>
<body>

<button id="button1">Button1 (dont get captured)</button>
<button id="button2">Button2 (get captured)</button>

  <script>
 elements = document.querySelectorAll('body *');
elements.forEach(function(elem) {
    elem.addEventListener('click', function(e){
      console.log(e.target); // or simply console.log(elem)
});
    });
  </script>
</body>
</html>

Спасибо всем, особенно @mplungjan, который подарил мне эту идею

Вы сказали, что не можете изменить ни html, ни сценарий jQuery, а теперь вы получаете модифицированный сценарий jQuery. Тем не менее, я не думаю, что модифицированный вами скрипт работает. Завтра проверю, так как уже поздно, а я лежу в постели.

Meziane 10.09.2018 23:26

На самом деле, код jQuery, написанный в голове, не может быть изменен, код javascript, написанный в нижнем колонтитуле, может быть изменен, я не собираюсь использовать его в нижнем колонтитуле на самом деле, я собираюсь запустить его в консоли Google Chrome.

user9050678 11.09.2018 09:07

Да, это работает. Но ваш вопрос был для меня непонятен. Более простое решение - добавить: $ (": button"). Click (function (e) {console.log (e.target);}); к твоему телу.

Meziane 11.09.2018 11:35

Другие вопросы по теме